标签：play span oat height class spl between red div
1 <div class="parentBox"> 2 <div class="leftbox"></div> 3 <div class="rightbox"></div> 4 </div>
浮动布局
1 .parentBox{ 2 width: 100%; 3 height: 600px; 4 } 5 .leftbox{ 6 float: left; 7 width: 300px; 8 height: 600px; 9 background: red; 10 } 11 .rightbox{ 12 margin-left: 300px; 13 height: 600px; 14 background: blue; 15 }
定位布局
1 .parentBox{ 2 position: relative; 3 width: 100%; 4 height: 600px; 5 } 6 .leftbox{ 7 position: absolute; 8 left: 0; 9 width: 300px; 10 height: 600px; 11 background: red; 12 } 13 .rightbox{ 14 margin-left: 300px; 15 height: 600px; 16 background: blue; 17 }
弹性盒模型flex布局
1 .parentBox{ 2 display: flex; 3 justify-content: space-between; 4 width: 100%; 5 height: 600px; 6 } 7 .leftbox{ 8 width: 300px; 9 height: 600px; 10 background: red; 11 } 12 .rightbox{ 13 flex: 1; 14 height: 600px; 15 background: blue; 16 }
标签：play span oat height class spl between red div
原文地址：https://www.cnblogs.com/shiyujian/p/14838074.html
