11

今天我又一次偶然发现了一个我在 css 布局中一直存在的问题。我想在水平行中有 5 个 div。例如，假设它们的宽度应该是：

  • 1：60 像素，
  • 2 : 30 %,
  • 3：40像素，
  • 4：*
  • 5 : 100 像素

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

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

尽管基于 javascript 的解决方案是可能的，但非脚本解决方案将是首选。

4

2 回答 2

23

你可以用它display:table来创建这个效果，我做了一个快速的小提琴

这使得个人div的行为像表格单元格，并且section是表格，我使用了一个部分只是为了有更清晰的代码，adiv也可以。

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

于 2012-10-17T13:11:32.040 回答
8

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>

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

于 2012-10-17T13:55:40.780 回答