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

admin2024-05-15  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)
        }
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明原文出处。如若内容造成侵权/违法违规/事实不符,请联系SD编程学习网:675289112@qq.com进行投诉反馈,一经查实,立即删除!