Question

今天又一次我偶然发现了一个css布局问题。我想在一个水平行中有5个div。比方说，他们的宽度应该是：

1：60 px，
2：30％，
3：40px，
4：*
5：100px

其中*代表“填满剩余空间”。回到过去，这是我们铺设宽度表的方式。现在由于可访问性原因，html表被禁止用于布局。这只是一个例子。我正在寻找一般的解决方案。

有人知道一个生成器，一个轻量级 javascript解决方案（可以是一个jQuery插件），一个教程，一本书或一个魔术师，它可以帮助我现在和永远解决这个问题吗？

尽管可以使用基于javascript的解决方案，但首选非脚本解决方案。

Answer 1

您可以使用display:table创建此效果，我快速fiddle

这使得个人div的行为与表格单元格相同，而section就是表格，我使用的部分只是为了拥有更清晰的代码，div会也工作。

如果窗口大小太小，您会注意到表格单元格比指定的小，这是因为表格的默认行为。要解决这个问题，只需添加一个最小宽度（与宽度相同的值）

Answer 2

http://jsfiddle.net/lnplnp/bFrmD/

#div1 {
    width: 60px;
}
#div2 {
    width: 30%;
}
#div3 {
    width: 40px;
}
#div4 {
}
#div5 {
    width: 100px;
}
.layout {
    display:table;
}
.cell {
    display: table-cell;
}

<html>
    <head>
        <title>DIV LIKE TABLE</title>
    </head>
    <body>
        <div class="layout">
            <div id="div1" class="cell">1</div>
            <div id="div2" class="cell">2</div>
            <div id="div3" class="cell">3</div>
            <div id="div4" class="cell">4</div>
            <div id="div5" class="cell">5</div>
        </div>
    </body>
</html>

交叉你的手指！使用最近的浏览器，你现在可以做到！

布局divs在css中，如HTML表格中的表格单元格

2 个答案: