Question

我有问题将N个div并排放在完整的浏览器宽度

我想要这样。当您调整div之间的浏览器空间时，必须保持相同，并且div必须在宽度上调整大小。

|div| |div| |div|

|  div  | |  div  | |  div  |

Answer 1

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

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

如果这样做，请注意填充：增加div的宽度，可能导致溢出。如果您仅通过

支持IE＆gt; = 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类型方式布局的元素可以穿插空白文本节点。为了解决这个问题，有一个非常糟糕的黑客：

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

这使得容器中出现的任何文本（例如空格）都是零大小的，除非它出现在彼此相邻的div中，在这种情况下它会恢复为12px 。正如我所说，一个非常糟糕的黑客。但它确实有效。

更通用的解决方案是新的flexbox proposal，但仍在进行大量修订：在各种浏览器中实现了两个过时的版本，最新的版本在今天的任何版本中都没有实现（2012-05 -15）。但是，如果您知道自己的确切环境，这可能是一个很好的解决方案。

Answer 2

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

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

三，做（Demo）：

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

Answer 3

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

如果数字由服务器确定（值来自数据库或会话或其他），您可以在服务器端生成适当的CSS。这种解决方案更可取。
如果没有，则需要JavaScript来计算视口的宽度，并相应地为div分配宽度值。

Answer 4

使用CSS3 Flexible Box Style Layout可以实现同样的功能，编码非常少。那么它取决于您计划支持的浏览器。

现在，仅在webkit引擎中支持灵活的盒子布局。 mozilla

Answer 5

将此作为答案，因为我认为它是有效的，可能对您有用。 960.gs和bootstrap都提供了与您想要的布局相同的脚手架。 960.gs只是布局，但如果bootstrap适合你，你可以在他们的网站上自定义它，以获得处理布局的位。对于bootstrap的一个警告，我还没有找到一种方法来删除div列上的左边距。 960.gs包括alpha和omega类，它们将margin-left和margin-right设置为0。我使用它时必须将它们添加到bootstrap中。

使用其中一个脚手架将为您节省大量时间和精力。如果您以后必须将代码交给其他人，或者甚至让其他人与您一起工作，使用脚手架也可以帮助他们处理您的代码。

并排divs全宽

5 个答案: