0

我无法将 N 个 div 与全浏览器宽度并排放置

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

|div| |div| |div|

|  div  | |  div  | |  div  |
4

5 回答 5

1

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

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

如果这样做，请注意填充：它会增加 adiv的宽度，可能会导致溢出。如果您仅支持 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;
}

如果你这样做，还有一个可能的问题：divs 之间的空间。发生这种情况是因为您在它们之间有空文本节点，并且display: inline-block认为这没关系：以inline-type 方式布局的元素可以穿插空白文本节点。为了解决这个问题，有一个非常糟糕的 hack：

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

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

更通用的解决方案是新的flexbox 提案，但它仍在大量修改中：在各种浏览器中实现了两个过时的版本，最新的一个截至今天 (2012-05-15) 都没有实现。但是，如果您知道您的确切环境，这可能是一个很好的解决方案。

于 2012-05-15T21:04:34.870 回答
0

同样的事情可以使用 CSS3 灵活的盒子样式布局来实现，而且代码非常少。好吧，这取决于您计划支持的浏览器。

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

于 2012-05-15T21:17:06.107 回答
0

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

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

对于三个，做（Demo）：

div
{
    width: 33%;
    float: left;
}
于 2012-05-15T21:04:03.170 回答
0

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

  1. 如果数字由服务器确定（值来自数据库或会话或其他），您可以在服务器端生成适当的 CSS 。该解决方案是优选的。
  2. 如果没有，您需要 JavaScript 来计算视口的宽度，并相应地为您的 div 分配宽度值。
于 2012-05-15T21:13:52.553 回答
0

把它作为一个答案，因为我猜它是有效的，并且可以很好地为你服务。960.gs 和 bootstrap 都为您想要的布局提供了脚手架。960.gs 只是布局，但如果引导程序适合您，您可以在他们的网站上对其进行自定义，以获得处理布局的部分。引导程序的一个警告，我还没有找到一种方法来删除 div 列上的左边距。960.gs 包括将alpha和分别omega设置margin-left为margin-right0 的类。当我使用它时，我必须将它们添加到引导程序中。

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

于 2012-05-15T21:43:41.153 回答