前言
最近,面试的时候都碰到一些关于利用CSS实现多列等高布局或者一侧宽度固定,另一侧宽度自适应的问题,下面稍微总结一下:
先看一道题目
巧妙的多列等高布局
规定下面的布局,实现多列等高布局,要求两列背景色等高。
1 <div class="container"> 2 <div class="left">多列等高布局左<br/>多列等高布局左</div> 3 <div class="right">多列等高布局右</div>4 </div>
方法一:使用flex布局
<div class="container"> <div class="left">多列等高布局左<br/>多列等高布局左</div> <div class="right">多列等高布局右</div> </div>
.container{ display:flex; } .left,.right{ flex:1; } .left{ background:pink; } .right{ background:green; }
缺点: IE9及IE9以下版本不支持flex属性
优点:实现方便,还可以方便实现各种比例
方法二:给容器div使用单独的背景色(流体布局)
原理就是给每一列添加相对应用的容器,并进行相互嵌套,并在每个容器中设置背景色。这里需要提醒大家你有多少列就需要多少个容器,比如说我们说的三列,那么你就需要使用三个容器。如下所示:
1 <div id="container2"> 2 <div id="container1"> 3 <div id="col1">Column 1</div> 4 <div id="col2">Column 2;Column 2;Column 2;Column 2;Column 2</div> 5 </div> 6 </div>
1 // 在这里有两列,故需要两个容器 2 #container2 { 3 float: left; 4 width: 100%; 5 background: orange; 6 position: relative; 7 overflow: hidden; 8 } 9 10 #container1 { 11 float: left; 12 width: 100%; 13 background: green; 14 position: relative; 15 right: 30%;/* 距离是第二列的宽度,加上2%的padding */ 16 } 17 18 #col1 { 19 width: 66%; 20 float: left; 21 position: relative; 22 left: 32%;/* container1容器right:30%;加上内边距2%,故为32%; */ 23 } 24 25 #col2 { 26 width: 26%; 27 float: left; 28 position: relative; 29 left: 36%;/* 加上三个内边距,所以是 36%;*/ 30 }
优点:兼容各种浏览器
缺点:嵌套太多div元素
两列等高布局,请戳 Demo ;三列等高布局 ,请戳Demo;
方法三:使用内外边距相抵消,注意父元素设置 "overflow:hidden;"
<div id="container"> <div id="left" class="column aside"> <p>Sidebar</p> </div> <div id="content" class="column section"> <p>Main content;content;content;content;content</p> </div> <div id="right" class="column aside"> <p>Sidebar</p> </div> </div>
1 #container { 2 margin: 0 auto; 3 overflow: hidden; 4 width: 960px; 5 } 6 7 .column { 8 background: #ccc; 9 float: left; 10 width: 200px; 11 margin-right: 5px; 12 margin-bottom: -99999px; 13 padding-bottom: 99999px; 14 } 15 16 #content { 17 background: #eee; 18 } 19 20 #right { 21 float: right; 22 margin-right: 0; 23 }
优点:兼容所有浏览器
戳 Demo
方法四:边框模仿等高列
<div id="containerOuter"> <div id="container"> <div id="content">;Main Content;Main Content;Main Content;Main Content;Main Content;Main Content;Main Content</div> <div id="left">Left Sidebar</div> <div id="right">Right Sidebar</div> </div> </div>
#containerOuter { margin: 0 auto; width: 960px; } #container { background-color: #0ff; float: left; width: 520px; border-left: 220px solid #0f0; /* 边框大小等于左边栏宽度,颜色和左边栏背景色一致*/ border-right: 220px solid #f00; /* 边框大小等于右边栏宽度,颜色和右边栏背景色一致*/ } #left { float: left; width: 200px; margin-left: -220px; padding:10px; position: relative; /* 测试 */ border:1px solid; } #content { float: left; width: 500px; padding:10px; margin-right: -520px; } #right { float: right; width: 200px; padding:10px; margin-right: -220px; position: relative; }
戳 Demo
小结:实现的方式还有很多~今天暂时总结这些~~日后再继续添加
时间: 2024-08-09 02:20:53