Html 如何使用.css使这4个图像在div中水平等距？

真的是这样

每个图像都是一个按钮，我希望它们都等距离地放在容器中

<div class="buttonImgContainer" >
      <span><img class="buttonImg servicesImg" src="Images/services.jpg" alt="" /></span>
      <span><img class="buttonImg galleryImg" src="Images/ProjectGallery.jpg" alt="" /></span>
      <span><img class="buttonImg estimateImg" src="Images/Estimate.jpg" alt=""/></span>
      <span><img class="buttonImg contactImg" src="Images/ContactUsSquare.png" alt=""/></span>
</div>

写作

.buttonImgContainer img {
 width: 40px; /* Can be anything - also percentages. */
}

应该有用。

.buttonImgContainer

匹配外部div的类，并且

img

确保这只应用于

.buttonImgContainer

内部的图像

编辑：或等待。。你说的等距是指以相等的距离分开吗？在这种情况下，代码类似于：

.buttonImgContainer { 
 margin: 0;
 padding: 0;
}

.buttonImgContainer img {
 margin-right: 40px; /* Can be anything - also percentages. */
} 

---

抱歉，如果我误解了：-）

我已经在这里编辑并测试了它：

你可能想保留收音机，但我不确定你想要什么尺寸，所以我让你选择。以下是我更改的代码：

<div>
<span><img style="width:21%; left: 2%; top: 200px; position: absolute;" class="buttonImg servicesButtonImg" src="http://ec2-50-17-14-144.compute-1.amazonaws.com/Sites/EvergreenPlumbing/Images/services.jpg" alt="" /></span>
<span><img style="width:21%; left: 27%; top: 200px; position: absolute;" class="buttonImg projectGalleryButtonImg" src="http://ec2-50-17-14-144.compute-1.amazonaws.com/Sites/EvergreenPlumbing/Images/ProjectGallery.jpg" alt="" /></span>
<span><img style="width:21%; left: 52%; top: 200px; position: absolute;" class="buttonImg estimateButtonImg" src="http://ec2-50-17-14-144.compute-1.amazonaws.com/Sites/EvergreenPlumbing/Images/Estimate.jpg" alt=""/></span>
<span><img style="width:21%; left: 77%; top: 200px; position: absolute;" class="buttonImg contactUsButtonImg" src="http://ec2-50-17-14-144.compute-1.amazonaws.com/Sites/EvergreenPlumbing/Images/ContactUsSquare.png" alt=""/></span>
</div>

---

这个很好用。注意：如果使用内联css，则必须删除标记class=“buttonImgContainer”，否则internet explorer（不知道为什么）将无法工作。它并没有像预期的那样100%正常工作，但它确实正常工作。

这对我来说似乎是可行的：

.buttonImgContainer span {
    width: 25%;
    float: left;
}


#buttonImgContainer img {
    float: right;
}

---

我写了这个例子，你可以检查一下

首先，您可以在css display:table cell中定义span标记属性

像这样

css

span{
    display:table-cell;
    padding-left:10px;
}​

HTML

<div class="buttonImgContainer" >
      <span><img class="buttonImg servicesImg" src="http://dummyimage.com/600x600/a334a3/fff.jpg" alt="" /></span>
      <span><img class="buttonImg galleryImg" src="http://dummyimage.com/600x600/a334a3/fff.jpg" alt="" /></span>
      <span><img class="buttonImg estimateImg" src="http://dummyimage.com/600x600/a334a3/fff.jpg" alt=""/></span>
      <span><img class="buttonImg contactImg" src="http://dummyimage.com/600x600/a334a3/fff.jpg" alt=""/></span>
</div>​

​

---

现场演示

结果表明，我与之前的答案非常接近。这明确地做到了：

.buttonImgContainer span {
    width: 25%;
    float: left;
}

span{
    text-align: center;
}

这里有一个解决方法

在我的例子中，我使用的是内联的

s<代码>文本对齐：居中名称不正确，因为它也会对齐图像。那是拼图中缺失的一块。。这个名字使我很反感

每个跨距都设置为其父

的25%，这反过来又使跨距小于页面，显示跨距被键入到该元素

---

在我的小提琴中，如果你调整列的大小，你会看到按钮相对于包含的div移动到正确的位置，

。buttonImgContainer

图像的宽度和高度是否相同？如：| i |或| i |？@Andres，这有关系吗？是的，这有关系。如果它们有不同的大小，我的方法将调整它们的大小，而其他方法可能无法工作。如果它们大小相同，调整百分比直到你满意为止，但将它们的总和设为100%。PS，因为它在两边，所以边距计数加倍。@KevinDeus有多种方法来处理它，如果你所有的图像都有相同的宽度，我们可以为你的问题找到一个更简单的解决方案。右边的按钮不是太偏右了吗？另外，它应该是.buttonImgContainer img而不是#buttonImgContainer img，因为它实际上在Chrome和FF中工作，但在IE中不工作。我的答案似乎不是很好。IE会发生什么？你能提供一个链接让我们看看吗？您将这两个语句都定义为class和id，所以IE可以做得恰到好处，而Chrome和FF则更加灵活并接受它。或者他们工作是因为他们不接受第二种说法，或者…有很多选择。你试过我的建议了吗？我试过了。我想在你看到我的答案后，我也编辑了它。不管怎样。。（我一直在玩它，因为我张贴，但你会看到它不正确）改变，看看它是否工作，因为你想现在。Ofc，根据您的喜好调整图标的大小，唯一的问题是宽度必须以%.为单位。有没有一种方法可以在没有绝对值的情况下执行此操作？您的方法似乎不会根据图像的包围div调整图像的大小（将包围div缩小50%没有任何效果）。图像似乎已硬编码到页面大小是的，它已硬编码到页面大小（位置：绝对）。问题是div几乎是从页面的中间开始的，所以另一种解决方案是将div居中（不知何故），并给它一个不同的宽度。但这取决于每个显示器是否从侧面等距离显示它们。除此之外，你还需要处理负利润，以使你的计划内容集中。我非常感谢你能看到这一点。我有很多方法可以解决方案内容的问题，但我已经确定部分原因是无法将项目集中在div中。当我删除除4个图像以外的所有元素时，我仍然会遇到这个问题。这就是我想要回答的问题。

.buttonImgContainer span {
    width: 25%;
    float: left;
}

span{
    text-align: center;
}