首页 > 代码库 > CSS技巧 (2)

CSS技巧 (2)

2024-09-06 19:30:45   209人阅读

前言 

 　　最近，面试的时候都碰到一些关于利用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

 

小结：实现的方式还有很多~今天暂时总结这些~~日后再继续添加

CSS技巧 (2)


联系
我们