Javascript 全宽并排俯冲

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

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

|div| |div| |div|

|  div  | |  div  | |  div  |

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

对于三个人，请执行（）操作：

---

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

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

s之间的空格。出现这种情况是因为它们之间有空文本节点，而

display:inline block

认为这没问题：以

inline

-类型方式排列的元素可以穿插在空文本节点中。要解决这个问题，有一个非常糟糕的黑客：

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

这使得出现在容器中的任何文本（例如空格）都是零大小的，除非它出现在相邻堆叠的div中，在这种情况下，它会恢复为

12px

。正如我所说，一个相当糟糕的黑客。但它是有效的

---

---

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

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

如果数字由服务器决定（值来自数据库或会话或其他任何内容），则可以在服务器端生成相应的CSS。这种解决方案更可取

如果没有，则需要JavaScript计算视口的宽度，并相应地为div指定宽度值

---

同样的事情也可以通过使用CSS3灵活的框式布局来实现，只需很少的编码。这取决于您计划支持的浏览器

---

现在，只有webkit引擎和mozilla才支持灵活的方框布局，我想这是一个答案，因为我想它是有效的，可能会很好地为您服务。960.gs和bootstrap都提供了与您想要的布局相同的支架。960.gs只是布局，但如果bootstrap适合您，您可以在他们的站点上自定义它，以获得处理布局的信息。引导的一个警告是，我还没有找到删除div列左边距的方法。960.gs包括

alpha

和

omega

类，分别将

margin left

和

margin right

设置为0。当我使用它时，我不得不将这些添加到引导程序中

---

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

您必须支持哪种浏览器级别？使用960.gs、引导或其他支架。这两个版本都可以在下载自定义版本之前自定义列和边沟宽度。它们还都支持流体宽度布局。+1对于960.gs，使用起来很简单。我认为他希望它们之间有固定的间距，这使问题变得复杂。在上述场景中，它们之间的间距是固定的？：）我有N个div。2个或3个divsy都可以，但百分比不适用于保证金，对吗？因此，如果您的页边距为10px，那么在第二个示例中，您的页边距将达到99%+20px，这将超过您的页面宽度。@NickSanders表示N divs，这在JQuery中是可能的，请参见此处：问题是我需要N divs。我还尝试了内联块。我想我需要使用javascriptYou可以使用JavaScript来调整

宽度

值。我现在正在使用它，但div之间的空间是一个大问题。我可以同时使用客户端和服务器端，但两个div之间的空间仍然很复杂

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.containerOfAllTheDivs {
    font-size: 0;
}
div.mydiv {
    font-size: 12px; /* or whatever */
    /* plus the above stuff */
}