Question

确实如此。

每个图像都是一个按钮，我希望它们全部适合容器中的等距

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

Answer 1

我在这里进行了编辑和测试：Link

您可能希望保留收音机，但我不确定您想要的尺寸，所以我让您选择。这是我改变的代码：

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

可以恢复为

.buttonImgContainer img
{
width:21%;
left: 2%;
top: 200px;
position: absolute;
}

这很好用。注意：如果你进行内联css，你必须删除标签class =“buttonImgContainer”，否则Internet Explorer（不知道为什么）根本不会工作。它没有像预期的那样100％工作，但它做得不错。

Answer 2

写作

.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. */
}

对不起，如果我误解了： - ）

Answer 3

这似乎对我有用：

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


#buttonImgContainer img {
    float: right;
}

Answer 4

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

首先，您可以在css display中定义span标签属性：table-cell

就像这样

<强> 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>

现场演示http://jsfiddle.net/rohitazad/LeY6t/2/

Answer 5

事实证明我与之前的答案非常接近。这明确地做到了：

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

span{
    text-align: center;
}

这是解决问题的.jsFiddle。

在我的情况下，我使用的是<span> s，它们是内联的。 text-align: center;命名很差，因为它也会对齐图像。那是拼图中丢失的一块......这个名字让我失望了。

每个范围都设置为其父<div>的25％，而后者又比页面小，显示跨度是键入该元素。

在我的小提琴中，如果你调整列的大小，你会看到按钮移动到与包含div .buttonImgContainer相关的适当位置。

如何使用.css在div中水平等距离制作这4幅图像？

5 个答案: