Question

我试图将类div中的三个图像对齐成一条直线水平线。

<div class="topimages">
  <img src="code/images/image_personallogo.png" alt="personallogo">

  <img src="code/images/image_propercorn.png" alt="propercorn">

  <img src="code/images/image_christmas.png" alt="christmascard">
  </div><!--top images-->

到目前为止

和CSS

.topimages {
  display: table;
  width: 1024px;
  margin: 40px auto;
}



.topimages img {
    width:319px;
    height:319px;
}

所以问题是图像几乎完全对齐，除了第二和第三图像之间的空间不同于第一和第二图像之间的空间。这就是我所说的：http://postimg.org/image/y00x4nvtr/

任何人都知道是什么原因以及如何解决这个问题？感谢。

Answer 1

最好的方法是使用表格和一个 tr ：

HTML：

<table id="myImages">
    <tr>
        <td>
            <img src="code/images/image_christmas.png" alt="christmascard" />
        </td>
        <td>
            <img src="code/images/image_propercorn.png" alt="propercorn" />
        </td>
        <td>
            <img src="code/images/image_christmas.png" alt="christmascard" />
        </td>
    </tr>
</table>

要更改表格中的边距，您必须使用 border-collapse 和 border-spacing

CSS：

#myImages {
    border: 1px solid silver;
    padding: 50px;
    margin: 0px auto;

    border-collapse: separate;
    border-spacing: 20px;
}

#myImages img {
    width: 320px;
    height: 320px;
}

在表格或（显示：表格）中，无需设置整个宽度以使用 margin：0 auto 来使元素居中。宽度来自内部元素的宽度。从填充和边距。

https://jsfiddle.net/ka827L97/

在DIV中对齐图像

1 个答案: