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的宽度为160px。

我希望顶部div中的图像在div内部水平间隔，两个外部div与下面图像的边缘齐平。我一直在尝试漂浮物，边缘，填充物等几个小时，但无法理解它。

感谢您的帮助！

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

一起使用

<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;
}

虽然并非所有浏览器都支持此功能。

Answer 2

这是一个跳跃点。 http://jsfiddle.net/gqf5h/1/

Answer 3

如果您知道菜单项的数量，请将每个菜单项包装在一个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>

Div：等水平间距

3 个答案: