flex
- css
.outer {
display: flex;
flex-wrap: nowrap;
align-items: center;
align-content: stretch;
}
- html
<div class='outer' style='background: blue; width: 100%;height:300px'>
<div style='flex-grow:0;flex-shrink:0;background: red; width: 70px;height:20px;font-size: 20px;'>a1</div>
<div style='flex-grow:1;flex-shrink:1;flex-basis: 0%;background: white; width: 70px;height:30px;font-size: 30px;'>a2</div>
<!-- flex-grow:1;flex-shrink:1;flex-basis: 0%;相当于flex:1 -->
<div style='flex-grow:0;flex-shrink:0;background: green; width: 70px;height:40px'>a3</div>
</div>
-
渲染效果
绝对定位法
- css
html,body{ margin: 0px;width: 100%; }
h3{height: 100px;margin:20px 0 0;}
#left,#right{
width: 200px;height: 200px; background-color: #ffe6b8;position: absolute;top:120px;
}
#left{
left:0px;
}
#right{
right: 0px;
}
#center{
margin:2px 210px ;background-color: #eee;height: 200px;
}
- html
<body>
<div id = "left">我是左边</div>
<div id = "right">我是右边</div>
<div id = "center">我是中间</div>
</body>
浮动法
- css
#left_self,#right_self{ width: 200px;height: 200px; background-color: #ffe6b8 }
#left_self {float: left;}
#right_self{float: right;}
#center_self{margin: 0 210px;height: 200px; background-color: #a0b3d6}
- html
<body>
<div id = "left_self">我是左边</div>
<div id = "right_self">我是右边</div>
<div id = "center_self">我是中间</div>
</body>
margin负值法
- css
#wrap{ width: 100%;height: 100px; background-color: black;float: left;}
#wrap #center{ margin:0 210px; height: 100px;background-color: red; }
#left_margin,#right_margin{ float: left;width: 200px;height: 100px;}
#left_margin {margin-left: -100%; background-color: pink}
#right_margin{margin-left: -200px; background-color: blue;}
- html
<body>
<div id = "wrap">
<div id = "center"></div>
</div>
<div id = "left_margin"></div>
<div id = "right_margin"></div>
</body>
- 渲染效果前后对比
转载于:https://www.jianshu.com/p/d49b8b4040ba