Divs：等宽水平间距

Question

我正在创建一个网站，主页上有一系列四张图片作为导航，并有一张大图在下方。

这些图片用于导航，当用户点击其中一张图片时，会跳转到相应的页面。大图是用来展示网站的主要内容。

<div style="width: 696px">
<div class="imglink"></div>
<div class="imglink"></div>
<div class="imglink"></div>
<div class="imglink"></div>
</div>

<div style="width:696px">
...
</div>

“imglink” div的宽度为160像素。

我希望顶部div中的图片在内部水平间距均匀分布，两个外部div与下面图像的边缘齐平。我已经尝试使用浮动、边距、填充等方法几个小时了，但无法解决问题。

感谢您的帮助！

- Vecta

Answer 1

我会让第一个和最后一个div不同。

<div class="imglink_first"></div>
<div class="imglink"></div>
<div class="imglink"></div>
<div class="imglink_last"></div>

然后你的CSS只能应用于imglink的边距。

你的总填充量将是696px - 4*160px = 696px - 640px = 56px。有三个填充区域，所以每个区域应该是56px/3 = 18.67px。不幸的是这不是一个整数，所以你需要四舍五入。18px * 3 = 54px 在你的div末尾留下两个额外的像素。此外，你需要每个左右侧18px/2 = 9px。

.imglink_first, .imglink, .imglink_last{
   float: left;
}

.imglink{
  margin: 0px 9px;
}

或者，您可以使用CSS选择器与:first-child和:last-child

（注：该段内容为HTML标签）

<div class="image-row" style="width: 696px">
   <div class="imglink"></div>
   <div class="imglink"></div>
   <div class="imglink"></div>
   <div class="imglink"></div>
</div>

.imglink{
   float: left;
   margin: 0px 9px;
}

.image-row:first-child, .image-row:last-child{
   margin: 0px;
}

尽管这不受所有浏览器的支持。

- brian_d

Answer 2

如果您知道菜单项的数量，请将每个菜单项包装在一个div中。然后将菜单div的宽度设置为宽度的百分比，并设置文本对齐方式为居中。例如：

对于4个菜单选项：

CSS

#menu div{
  width:25%;
  text-align:center;
  display:inline-block;
}

html

<div id='menu'>
  <div><a href='#'>link</a></div>
  <div><a href='#'>link</a></div>
  <div><a href='#'>link</a></div>
  <div><a href='#'>link</a></div>
</div>

- daniel

Answer 3

这是一个起点，与IT技术有关。以下是需要翻译的内容：

这里有一个起点供您参考。 http://jsfiddle.net/gqf5h/1/

- Stephen