Question

我有一个960px宽的父div，我有5个div，我想平均填充父级的宽度。

我不只是划分960 x 5的原因是因为它们将充当按钮，如果我添加或取走一个，我希望它们调整到父div的宽度。

我还想在每个div之间留出5px的间隙，这样他们就不会碰到了。

这是我目前设置的HTML：

<div class="parent">

   <a href="home.html"><div id="home">HOME</div></a>
   <a href="about.html"><div id="about">ABOUT</div></a>
   <a href="getoffer.html"><div id="getoffer">GET OFFER</div></a>
   <a href="testimonials.html"><div id="testimonials">TESTIMONIALS</div></a>
   <a href="contact.html"><div id="contact">CONTACT</div></a>

  </div>

完整JSFiddle

Answer 1

如果需要，可以使用此JQuery代码：

jsFiddle is here

var count = $(".parent a").length;
$(".parent div").width(function(){
    return ($(".parent").width()/count)-5;
}).css("margin-right","5px");

您可以使用count = $(".parent a").length;计算父元素的子元素数。 resource

Answer 2

尝试

width: 18%

您可以在添加或删除时相应地调整宽度。

最后，在你的CSS中，你有很多重复，可以使用class='button'进一步清理。

http://jsfiddle.net/WeQwc/1/

坐在彼此旁边的div，生成自己的宽度来填充父div

2 个答案: