Question

刚开始学习CSS，碰巧看到有关网页布局display:table的一些讨论。我创建了一个simple pen，其中分别由inline-block和float创建了两行布局。我怀疑display:table是否可以用来做这件事。

    .container{
       width:500px;
       height:200px;
       border:1px solid green;
       margin:10px;
    }

    .a, .b {
       display:inline-block;
       background:grey;
       border:1px solid red;
       box-sizing:border-box;
       vertical-align:top;
     }

    .a {
       width:30%;
       height:50%;
     }

     .b {
       width:70%;
       height:50%;
     }

<div class="container">
        <div class="a">a</div>
        <div class="b">b</div>
        <div class="b">b</div>
        <div class="a">a</div>
</div>

Answer 1

对于此类布局，最好避免display: table，因为您的单元格在每列中的大小不同。

对于这些布局，最好的办法是使用display: flex，这是非常通用的，并且允许比inline-block和float更大的灵活性。其中一个缺点是它可能与旧浏览器不兼容，请查看compatibility list here

这是get started with flexbox的好地方。

P.S。如果您真的想通过display: table，可以尝试以下SO问题中建议的答案： table cell width issue

Answer 2

可以使用display: flex，它现在是最佳解决方案。

如何通过display：table

2 个答案: