两列布局的多种方式
2018-05-05 本文已影响0人
lueyoo
- Html
<body>
<div class="content">
<div class="left">
<p>Hello</p>
<p>I'am left</p>
</div>
<div class="right">
<p>Hi</p>
<p>I'am right</p>
</div>
</div>
</body>
- float+margin
左边固定为200px
.left{
background:#fcc;
width: 200px;
float: left;
}
.right{
background: #f66;
margin-left: 210px;
}
- position:absolute
.content{
position: relative;
width: 100%;
height: 500px;
border: 1px solid #000;
}
.left{
background:#fcc;
width: 200px;
position: absolute;
}
.right{
background: #f66;
position: absolute;
left: 210px;
}
- Flex
.content{
width: 100%;
height: 500px;
border: 1px solid #000;
display:flex;
}
.left{
background:#fcc;
width: 200px;
margin-right:10px;
}
.right{
background: #f66;
flex:1;
}
*float+BFC
.content{
width: 100%;
height: 500px;
border: 1px solid #000;
}
.left{
background:#fcc;
width: 200px;
margin-right: 10px;
float: left;
}
.right{
background: #f66;
overflow: hidden;
}
