转载于 ：https://www.jb51.net/css/637938.html#comments
css设置多列等高布局的方法示例
发布时间：2018-09-21 15:18:09 作者：weiqinl
我要评论
我要评论
这篇文章主要介绍了css设置多列等高布局的方法示例的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
初始时，多个列内容大小不同，高度不同。现在需要设置不同的背景来显示，而且各个列的高度需要保持一致。那么这就需要利用到多列等高布局。
最终需要的效果：
1. 真实等高布局
flex 技术点：弹性盒子布局flex，默认值就是自带等高布局的特点。
定义flex布局的时候，有一些默认值。
flex-direction 属性定义主轴的方向。默认值为 row ，一般是水平显示。flex容器的主轴被定义为与文本方向相同。 主轴起点和主轴终点与内容方向相同。
align-item 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。默认值为 stretch ，元素被拉伸以适应容器。
|
1
2
3
4
5
|
<
div
class
=
"box"
>
<
div
class
=
"left"
></
div
>
<
div
class
=
"center"
></
div
>
<
div
class
=
"right"
></
div
>
</
div
>
|
css
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
.box {
display
: flex;
}
.
left
{
width
:
300px
;
background-color
: grey;
}
.
center
{
flex:
1
;
background
:
red
;
}
.
right
{
width
:
500px
;
background
: yellow;
}
|
See the Pen equal-hight-layout-flex by weiqinl ( @weiqinl ) on CodePen .
2. 真实等高布局
table-cell 技术点：table布局天然就具有等高的特性。
display设置为 table-cell ，则此元素会作为一个表格单元格显示。类似于使用标签 <td> 或者 <th> 。
HTML结构
|
1
2
3
4
5
|
<
div
class
=
"box"
>
<
div
class
=
"left"
></
div
>
<
div
class
=
"center"
></
div
>
<
div
class
=
"right"
></
div
>
</
div
>
|
CSS样式
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
.
left
{
display
:
table-cell
;
width
:
30%
;
background-color
: greenyellow;
}
.
center
{
display
:
table-cell
;
width
:
30%
;
background-color
:
gray
;
}
.
right
{
display
:
table-cell
;
width
:
30%
;
background-color
: yellowgreen;
}
|
3. 假等高列布局 内外边距底部正负值
实现：设置父容器的overflow属性为hidden。给每列设置比较大的底内边距，然后用数值相似的负外边距消除这个高度。
- 不考虑可扩展性，只需要将padding-bottom/margin-bottom ，设置为最高列与最低列相差高度值，就可以得到等高效果。
- 考虑扩展性，为了防止将来可能某列高度大量的增加或减少，所有，我们设置了一个比较大的值。
技术点
- background 会填充内边距 padding，而不会填充外边距 margin 。margin具有坍塌性，可以设置负值。
- float:left。使用float，元素会脱离文档流，使其浮动至最近的文档流元素。在这里的作用是，将三个div元素并排。
- overflow:hidden; 设置overflow属性为hidden，同时会产生 块级格式化上下文(BFC)，消除float带来的影响。同时，根据需要，会截取内容以适应填充框，将超出容器的部分隐藏。
HTML结构
|
1
2
3
4
5
6
7
8
9
|
<
div
class
=
"box"
>
<
div
class
=
"left"
></
div
>
<
div
class
=
"center"
></
div
>
<
div
class
=
"right"
></
div
>
</
div
>
|
CSS
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
.box {
overflow
:
hidden
;
}
.box > div{
/**
* padding-bottom 设置比较大的正值。
* margin-bottom 设置绝对值大的负值。
**/
padding-bottom
:
10000px
;
margin-bottom
:
-10000px
;
float
:
left
;
width
:
30%
;
}
.
left
{
background-color
: greenyellow;
}
.
center
{
background-color
:
gray
;
}
.
right
{
background-color
: yellowgreen;
}
|
4. 假等高布局，背景视觉效果
技术点： float浮动，并设置每一列的宽度。设置父元素为行内块级元素，之后再利用线性渐变的图片来设置父元素的背景凸显等高的效果
CSS linear-gradient 函数用于创建一个表示两种或多种颜色线性渐变的图片。
display: inline-block ，设置为行内块级元素。
|
1
2
3
4
5
6
7
|
<
div
class
=
"box five-columns"
>
<
div
class
=
"col"
></
div
>
<
div
class
=
"col"
></
div
>
<
div
class
=
"col"
></
div
>
<
div
class
=
"col"
></
div
>
<
div
class
=
"col"
></
div
>
</
div
>
|
css
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
/** 需要自己算出平均每列的宽度 */
.box {
display
: inline-
block
;
background
: linear-gradient(
to
right
,
red
,
red
20%
,
blue
20%
,
blue
40%
,
yellow
40%
,
yellow
60%
,
orange
60%
,
orange
80%
,
grey
80%
,
grey);
}
.col {
float
:
left
;
width
:
16%
;
padding
:
2%
;
}
|
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
<p class="tip">如您对本文有所疑义或者对本文内容提供补充建议，请联系小编<a href="http://wpa.qq.com/msgrd?v=3&uin=1079426599&site=jb51net&menu=yes" target="_blank"><img border="0" src="https://pub.idqqimg.com/qconn/wpa/button/button_111.gif" alt="点击这里给我发消息" title="点击这里给我发消息"></a>，本站会保留修改者版权</p><div class="clearfix">
<script type="text/javascript" src="//jscode.jbzj.com/production/ql/common/h/source/n/h/production/kmtr.js"></script>
</div>
<div class="jb51ewm"><div class="fl"><img src="//files.jb51.net/skin/2018/images/jb51ewm.png"></div><div class="fr"><p>微信公众号搜索 “ <span>脚本之家</span> ” ，选择关注</p><p>程序猿的那些事、送书等活动等着你</p></div></div></div><!--endmain-->
<div class="tags clearfix">
<i class="icon-tag"></i>
<ul class="meta-tags">
<li class="tag">Tag：<a href="/do/tag/css/" target="_blank">css</a> <a href="/do/tag/%B6%E0%C1%D0/" target="_blank">多列</a> <a href="/do/tag/%B5%C8%B8%DF/" target="_blank">等高</a> <a href="/do/tag/%B2%BC%BE%D6/" target="_blank">布局</a> </li>
</ul>
</div>
<div class="lbd clearfix">
</div>
<div id="shoucang"></div>
<div class="xgcomm clearfix">
<h2>相关文章</h2>
<ul>
<li class="lbd clearfix"><script type="text/javascript" src="//jscode.jbzj.com/site/g/bx_d/production/hak_cq.js"></script>
-
我们在写页面的时候，有的时候会遇到多栏布局，这篇文章主要介绍了前端应该掌握的CSS实现多列等高布局技巧，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟2018-06-05 -
这篇文章给大家介绍了三个小节的内容，其中包括关于css3中flexbox需要掌握的概念、flexbox实现水平垂直居中对齐和三列等高自适应页脚区域黏附底部的布局，有需要的可以参考2016-09-12
-
下面小编就为大家带来一篇浅析CSS等高布局的6种方式。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-04
-
页面布局中经常遇到等高布局的情况，为了得到更好的视觉效果，就要实现DIV等高布局的效果。以最普遍的DIV三列布局来说2014-09-03
-
这种情况下就需要两列的高度保持一致了，左边高度增加，右边也跟着增加，右边高度增加，左边同样也要增加，否则就会出现“断层”的效果,接下来将介绍多列等高的实现方法，2012-12-03
-
CSS网页布局实例:三栏等高布局.2009-08-29
-
网页制作Webjx文章简介：为了让网页更美观、协调，有的时候需要用到左右等到布局，传统的等高布局是用 javascript 实现的，现在来看看 silence 发明的真正的 CSS 实现的等2009-04-02
-
三列等高CSS布局的一个实例， 修改国外的一个demo， 兼容到了IE5.5 和标准的浏览器OperaFirefoxSafari。 不过hack太多，不是很喜欢这样做。 全部代码如下2008-10-17
-
本文讲的等高布局是在不手动设置元素高度的情况下，使用纯css实现各个元素高度都相当的效果，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看2019-01-09
扫一扫
897
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
