全宽并排div

Question

我在将N个div与整个浏览器宽度并排放置时遇到问题

我要这样 调整浏览器大小时，div之间的空间必须保持不变，并且div的宽度必须重新调整。

|div| |div| |div|

|  div  | |  div  | |  div  |

Answer 1

一种解决方案是使用百分比：

div.mydiv {
    width: 33%;
    display: inline-block;
}

如果执行此操作，请注意填充：这会增加div的宽度，可能会导致溢出。 如果仅支持IE> = 8，则可以通过以下方法解决此问题：

div.mydiv {
    width: 33%;
    display: inline-block;
    -moz-box-sizing: border-box; /* OMG why doesn't Firefox support this yet */
    -webkit-box-sizing: border-box; /* Safari below 5.1, including 5 */
    box-sizing: border-box;
}

如果执行此操作，则还有一个可能的问题： div之间的空间。 发生这种情况是因为它们之间有空的文本节点，并display: inline-block认为还可以：以inline -type方式布局的元素可以散布在空白文本节点中。 要解决此问题，有一个非常糟糕的技巧：

div.containerOfAllTheDivs {
    font-size: 0;
}
div.mydiv {
    font-size: 12px; /* or whatever */
    /* plus the above stuff */
}

这样可以使出现在容器内的所有文本（例如，空格）都为零大小，除非它出现在您彼此堆叠的div内，在这种情况下，它会恢复为12px 。 如我所说，这是一个非常糟糕的hack。 但这有效。

---

更为通用的解决方案是新的flexbox提案 ，但仍需进行大量修订：在各种浏览器中实现了两个过时的版本，而到目前为止 （2012-05-15）尚未实现任何最新版本。 但是，如果您知道确切的环境，这可能是一个很好的解决方案。

Answer 2

对于两个div，只需执行（ Demo ）：

div
{
    width: 49%;
    float: left;
}

对于三个，请执行（ 演示 ）：

div
{
    width: 33%;
    float: left;
}

Answer 3

如果需要任意数量的div，则有两个选择：

1. 如果数字由服务器确定（值来自数据库，会话或其他），则可以在服务器端生成适当的CSS。 该解决方案是优选的。
2. 如果不是，则需要JavaScript来计算视口的宽度，并相应地为div分配宽度值。

Answer 4

使用CSS3灵活框样式布局只需很少的代码，就可以实现相同的目的。 好吧，这取决于您计划支持的浏览器。

现在，仅在Webkit引擎和Mozilla中支持灵活框布局

Answer 5

将此作为答案，因为我认为它是有效的并且可能为您服务。 960.gs和bootstrap都提供与所需布局相同的脚手架。 960.gs只是布局，但是如果引导适合您，则可以在其网站上对其进行自定义，以获取处理布局的信息。 关于引导程序的一个警告，我还没有找到一种方法来删除div列上的左侧边距。 960.gs包含alpha和omega类，它们将margin-left和margin-right设置为0pectelevley。 使用时，我必须将它们添加到引导程序中。

使用其中一种脚手架将节省大量时间和精力。 如果您以后不得不将代码交给其他人，或者只是让其他人与您一起工作，那么使用脚手架也将帮助他们处理您的代码。