題目: 實(shí)現(xiàn)一個兩列布局,左側(cè)寬度150,右側(cè)自適應(yīng)
這是一段完整的代碼
<!DOCTYPE html>
<html>
<head>
<title>BFC</title>
<meta charset="utf-8"/>
<style>
.wrap{
width:300px;
position: relative;
border:1px solid #000;
}
.aside{
width:100px;
height: 150px;
float: left;
background: red;
}
.main{
height: 200px;
background: yellow;
overflow: hidden;
}
.par{
border:5px solid #000;
width:300px;
overflow: hidden;
}
.child{
border:5px solid #f66;
width:100px;
height:100px;
float: left;
}
p{
color:red;
background: #fcc;
width:200px;
line-height: 200px;
text-align: center;
margin: 100px;
}
.wrapP{
overflow: hidden;
}
</style>
</head>
<body>
<h1>自適應(yīng)兩欄布局</h1>
<div class="wrap">
<div class="aside"></div>
<div class="main"></div>
</div>
<h1>清除內(nèi)部浮動</h1>
<div class="par">
<div class="child"></div>
<div class="child"></div>
</div>
<h1>防止垂直margin重疊</h1>
<p>哈哈</p>
<div class="wrapP">
<p>haha</p>
</div>
</body>
</html>
image.png
image.png
這是效果,
BFC是塊級格式化上下文,一個創(chuàng)建了新的BFC 的盒子是獨(dú)立布局的,盒子內(nèi)元素的布局不會影響盒子外部的元素,在同一個BFC中的兩個相鄰的盒子在垂直方向發(fā)生margin 重疊的問題
實(shí)現(xiàn)一個兩列布局,左側(cè)寬度150,右側(cè)自適應(yīng)
方法二 左邊position:absolute;右邊margin-left:200px;
<div class="wrap">
<div class="left1" style="position: absolute;">left1</div>
<div class="right1" style="margin-left:200px;">right1</div>
</div>
方法三 左邊浮動,右邊margin-left
<div class="wrap">
<div class="left1" style="float:left;">left1</div>
<div class="right1" style="margin-left:200px;">right1</div>
</div>
方法四 position :absolute 也能達(dá)到效果
<div class="wrap">
<div class="left1" style="position:abxolute;left:0;top:0;width:150px">left1</div>
<div class="right1" style="position:abxolute;left:150px;width:100%;top:0;">right1</div>
</div>
