并列的两个盒子，一个有固定宽度，如何让另一个自适应剩余宽度

duansamve

已于 2024-07-06 21:31:32 修改

阅读量251

点赞数 3

分类专栏： css 文章标签： css3 css

于 2024-05-14 09:54:37 首次发布

本文链接：https://blog.csdn.net/duansamve/article/details/138840465

版权

css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

方法一: flex布局

没有浮动，让页面布局更为稳定。

<style>
	 #d1{
		  width:100%;
		  display:flex; /*flex布局*/
		}
        .dz{
        	background: red;
        	width:200px;
        	height: 200px;
        } 
       .dx{
           flex:1;     /*flex:1*/
           height: 200px;
           background: yellow;  
       } 
	</style>
 
    <div id="d1">
	     <div class="dz"></div>
	     <div class="dx"></div>
	</div>

方法二：css的计算函数

<style>
       .wrap{
            width:1000px;
            height:400px;
            border:1px solid red;
        }
        .left{
            width:200px;
            height:100%;
            background:gray;
            float:left;
        }
        .right{
            height:100%;
            background:green;
            float:right;
            /*计算函数 calc()*/ 
            width:calc(100%-200px);
        }
	</style>          
 
	 <div class="wrap">
          <div class="left"></div>
          <div class="right"></div>
     </div>

方法三：外边距法

<style>
       .wrap{
            width:1000px;
            height:400px;
            border:1px solid red;
        }
        .left{
            float:left;
            width:200px;
            border:1px solid red;
            height:100%;
            background:gray;
        }
        .right{
            height:100%;
            border:1px solid blue;
            width:auto;
            background:green;
            margin-left:200px;  /*使用外边距推开*/
        }
	</style> 
 
    <div class="wrap">
          <div class="left"></div>
          <div class="right"></div>
     </div>

方法四：通过 grid-template-columns

(固定盒子的宽度)px auto 和 grid-column-gap:0 来实现

<div class="d">
        <div class="box1"></div>
        <div class="box2"></div>
</div>

* {
            margin: 0;
            padding: 0;
        }
 
        .d {
            width: 100%;
            height: 200px;
 
            display: grid;
            grid-template-columns: 200px auto;
            grid-column-gap: 0;
        }
 
        .box1 {
            height: 100%;
            background-color: rgb(88, 121, 80);
        }
 
        .box2 {
            height: 100%;
            background-color: rgb(173, 119, 119)
        }