CSS技巧

Posted 2020-09-02

前言 

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

 

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