2013-04-30 79 views
3

假设您有n 在容器中浮动 div。你如何使它们之间的空间(边距)自动相等?它应该支持窗口大小调整事件。divs之间的相等边距

如果需要,我可以使用JQuery,但我宁愿它是纯html/css。 谢谢

+1

我苏为了填补集装箱,这意味着这些div应该调整它们的利润率。 – MaxArt 2013-04-30 21:29:33

+1

因为它是强制性的,所以'display:table'是没有问题的。无论如何,在JS中,只要你知道每行你想要多少个div,就很有可能。因此,您可以抓取容器和每个div的innerWidth(),除以您设置的每行div的数量,然后计算每个div的边距。如果没有其他人回答,我可以尝试为您编码。无论如何,尝试阅读[这个答案](http://stackoverflow.com/a/10550660/684932),它可能会帮助你。 – RaphaelDDL 2013-04-30 21:33:26

回答

3

简单!为他们辩护! (仅使用CSS

:不要把它们飘浮,飘浮是你应该在很多情况下做的最后一件事。

下面是一个例子: DEMO PAGE

HTML

<ul> 
    <li>item 1</li> 
    <li>item 2</li> 
    <li>another item</li> 
    <li>and another</li> 
</ul> 

CSS

ul{ width:100%; text-align:justify; } 
ul::after{ content:''; display:inline-block; width:100%; } 
    ul li{ display:inline-block; } 
+0

我不明白为什么很多设计师会继续使用浮动元素。他们比别的更麻烦。 – MaxArt 2013-04-30 21:33:14

+0

这很好,也许我应该放弃浮动 – 2013-04-30 21:33:24

0

div { float: left; margin-left: 5%; }