Daniel's Studio.

CSS布局学习｜两列等高布局

CSS 前端
字数统计: 756阅读时长: 3 min
2019/12/29 Share

需求

页面中经常会使用到多栏布局，但如果栏目带有背景颜色且各自的内容高度不一时，就会出现每一栏的底部不能够对其的情况，而我们所希望的是每一栏的底部可以平齐。

解决方案

HTML代码如下，代码中我手动指定了每栏的高度，实际中应由内容决定：

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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>两列等高布局demo</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            #container{
                overflow: hidden;
                background-color: hotpink;
                border: solid;
            }
            #left{
                width: 200px;
                height: 300px;
                float: left;
                background-color: red;
            }
            #right{
                width: 200px;
                height: 500px;
                float: left;
                background-color: green;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="left"></div>
            <div id="right"></div>
        </div>
    </body>
</html>

方案一：padding + margin

给左右两列都加上以下样式：

1
2
padding-bottom: 1000px;
margin-bottom: -1000px;

以上代码给每列都设置了较大的底部正内边距，再设置绝对值相等的底部负外边距。由于对于父容器设置了overflow: hidden；，多出的内边距就会被隐藏掉，并且此时当任意一栏高度增加时导致父容器的高度增加时，较低的那一栏就会使用内边距进行补偿。又因为背景是包含内边距的，因此就实现了两列等高的假象。

缺点：每一栏的边框在底部无法正常显示，如下图所示。

方案二：表格布局

父容器设置：display: table;

每一栏设置：display: table-cell;

table元素中的table-cell元素默认是等高的。注意此时必须取消浮动，否则无效。同时，就算手动指定了不同高度，还是会等高。

方案三：flex弹性布局

只需要在父容器中定义display: flex;

flex中的伸缩项目默认为拉伸为父元素的高度。此时两列布局和等高都会自动实现。

注意此时也无需设置浮动（就算设置了也不影响），但此时如果手动给每栏都设定高度的话，高度还是会不一样的，正好和table布局完全相反。

方案四：JS高度计算

需要设置浮动，然后把每栏高度都设为最高的那一栏的高度。

1
2
3
4
5
6
7
8
9
10
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
  $(function(){
    var m = Math.max(
      $('#left').height(),
      $('#right').height()
    );
    $('#container div').height(m);
  })
</script>

在记录本篇文章中遇到的问题

长串英文不换行

在固定宽度的标签中，长单词不会自动换行，而中文会自动换行，因为

  • 英文中将不包含空格、换行的连续文本认为是一个词，默认情况下不换行
  • 中文中标点和文字都是独立的，所以会自动换行

解决方法：

1
2
3
4
5
6
7
8
p {
  word-wrap: break-word;
  
  /**
   *或者
   *word-break: break-all;
   */
}

原文作者：Daniel Xu

原文链接：http://yoursite.com/2019/12/29/CSS布局学习-｜-两列等高布局/

发表日期：December 29th 2019, 10:47:29 am

更新日期：February 18th 2020, 10:35:32 pm

版权声明：本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可

CATALOG
  1. 1. 需求
  2. 2. 解决方案
    1. 2.1. 方案一：padding + margin
    2. 2.2. 方案二：表格布局
    3. 2.3. 方案三：flex弹性布局
    4. 2.4. 方案四：JS高度计算
  3. 3. 在记录本篇文章中遇到的问题
    1. 3.0.1. 长串英文不换行
Total : 24
2020
2019
课程作业 Unity CSS 前端 编程游戏 解谜 MD5 c 云桌面 服务计算 CentOS ssh Docker Go语言 Javascript SPA PoW共识机制 区块链
3D游戏编程 CSS学习笔记 信息安全 服务计算 Javascript学习笔记 前端学习笔记 区块链