CSS多列等高布局

ZERO • 2019年6月11日 • CSS • 阅读 2149

在项目开发中，经常遇到需要多列等高布局的需求。解决这种的需求的方法有很多，各有利弊，现总结如下。

方法一：使用flex布局
优点：实现方便，还可以方便实现各种比例；缺点: IE9及IE9以下版本不支持flex属性

<div class="container">
    <div class="left">多列等高布局左多列等高布局左</div> 
    <div class="right">多列等高布局右</div>
</div>

.container{
  display:flex;
}
.left,.right{
  flex:1;
}
.left{
  background:pink;
}
.right{
  background:green;
}

方法二：流体布局
优点：兼容各种浏览器；缺点：嵌套太多DIV元素；

以两列等高布局为例

<div id="container2">
   <div id="container1">
     <div id="col1">Column 1</div>
     <div id="col2">Column 2；Column 2；Column 2；Column 2；Column 2</div>
   </div>
 </div>

// 在这里有两列，故需要两个容器
#container2 {
  float: left;
  width: 100%;
  background: orange;
  position: relative;
  overflow: hidden;
}

#container1 {
  float: left;
  width: 100%;
  background: green;
  position: relative;
  right: 30%;/* 距离是第二列的宽度，加上2%的padding */
}

#col1 {
  width: 66%;
  float: left;
  position: relative;
  left: 32%;/* container1容器right:30%;加上内边距2%，故为32%；  */
}

#col2 {
  width: 26%;
  float: left;
  position: relative;
  left: 36%;/* 加上三个内边距，所以是 36%；*/
}

这种布局的原理是给每一列添加相对应用的容器，并进行相互嵌套。这里需要注意的是想要多少列等高，就需要多少个容器

方法三：使用内外边距相抵消
优点：兼容所有浏览器；缺点：暂没发现；需要注意的是父元素添加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>

#container {
  margin: 0 auto;
  overflow: hidden;
  width: 960px;
}

.column {
  background: #ccc;
  float: left;
  width: 200px;
  margin-right: 5px;
  margin-bottom: -99999px;
  padding-bottom: 99999px;
}

#content {
  background: #eee;
}

#right {
  float: right;
  margin-right: 0;
}

原创文章，作者：ZERO，如若转载，请注明出处：https://www.edu24.cn/course/css/multi-column-layout.html

CSS多列等高布局

相关推荐

发表回复