CSS两栏布局(左侧定宽,右侧自适应)
方法一:float + margin-left
/*css*/
.left1{
width: 100px;
background-color: red;
float:left;
}
.right1{
background-color: green;
margin-left: 100px;
}
//HTML
<div class="left1">
<h1>我是左边</h1>
<span>我是左边左边左边啊啊啊啊啊</span>
</div>
<div class="right1">
<h1>我是右边</h1>
<span>我是右边右边右边啊啊啊啊啊</span>
</div>
将左侧设置为左浮动,浮动元素脱离文档流不占位。右侧元素将顶上,这时只需给右侧一个margin-left,值为左侧元素的宽度,就将左侧元素的位置空出来,形成两栏布局。
方法二:position + margin-left
/*css*/
.left2{
width: 100px;
background-color: red;
position: absolute;
}
.right2{
background-color: green;
margin-left: 100px;
}
//HTML
<div class="left2">
<h1>我是左边</h1>
<span>我是左边左边左边啊啊啊啊啊</span>
</div>
<div class="right2">
<h1>我是右边</h1>
<span>我是右边右边右边啊啊啊啊啊</span>
</div>
原理跟浮动一样,因为绝对定位也是脱离文档流不占位。
方法三:弹性盒模型
/*css*/
.box{
display:flex;
}
.left3{
width: 100px;
background-color: red;
}
.right3{
background-color: green;
flex-grow: 1;
}
//HTML
<div class="box">
<div class="left3">
<h1>我是左边</h1>
<span>我是左边左边左边啊啊啊啊啊</span>
</div>
<div class="right3">
<h1>我是右边</h1>
<span>我是右边右边右边啊啊啊啊啊</span>
</div>
</div>
弹性盒模型里元素默认是水平排列,当给右侧元素设置flex-grow:1时,该元素将占据该行所有剩余空间。
方法四:display:table
/*css*/
.box1{
display: table;
}
.left4{
display: table-cell;
min-width: 100px;
background-color: red;
}
.right4{
background-color: green;
width: 100%;
display: table-cell;
}
//HTML
<div class="box1">
<div class="left4">
<h1>我是左边</h1>
<span>我是左边左边左边啊啊啊啊啊</span>
</div>
<div class="right4">
<h1>我是右边</h1>
<span>我是右边右边右边啊啊啊啊啊</span>
</div>
</div>
将父元素设置为display:table,所有子元素都设置为display:table-cell,并且将右侧元素的宽设置成100%,形成两栏布局。
方法五:float+BFC
/*css*/
.left5{
width:100px;
background-color: red;
float: left;
}
.right5{
background-color: green;
overflow: hidden;
}
//HTML
<div class="left5">
<h1>我是左边</h1>
<span>我是左边左边左边啊啊啊啊啊</span>
</div>
<div class="right5">
<h1>我是右边</h1>
<span>我是右边右边右边啊啊啊啊啊</span>
</div>
左侧元素设置左浮动,右侧元素设置overflow:hidden时触发块级格式上下文。因为块级格式上下文并不会和浮动元素重合,设置overflow:hidden还可以清除左侧元素的浮动,使他们一行排列形成两栏布局。
最后的效果图