第一种:左定宽,右自适应布局
1.浮动布局
<div id="left">Left sidebar</div>
<div id="content">Main Content</div>
* {
margin: 0;
padding: 0;
}
#left {
float: left;
width: 200px;
background-color: green;
}
#content {
background-color: orange;
margin-left: 200px;/*==等于左边栏宽度==*/
}
2.浮动和负边距
<div id="left">
Left Sidebar
</div>
<div id="content">
<div id="contentInner">
Main Content
</div>
</div>
*{
margin: 0;
padding: 0;
}
#left {
background-color: green;
float: left;
width: 200px;
margin-right: -100%;
}
#content {
float: left;
width: 100%;
}
#contentInner {
margin-left: 200px;/*==等于左边栏宽度值==*/
background-color: orange;
}
第二种:左不定宽,右自适应
1.float + BFC
<div class="left">
left
</div>
<div class="right">
right
</div>
.left{
float: left;
width: 100px; // 左虽不定宽,但是是有宽度的,但是随着宽度的动态变化布局也是正常的
margin-right: 20px; //形成20px的间隔
}
.right{
overflow: hidden; <!-- 通过设置overflow:hidden来触发BFC特性,也可以使用*zoom: 1 -->
}
2.flex布局
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
</div>
</div>
.parent{
display: flex;
}
.left{
// margin-right: 20px;
}
.left p{
width: 200px;
}
.right{
flex: 1;
}