Question

我有一个div，连续5个图像，每个300px。每边有10px的边距，它们应该适合我的div宽1600px，但最后一张图像碰到下一行。为什么不合适？经过一些反复试验后，我发现当我将边距调整到8.5px时，它们正确适合，但这似乎没有意义？我没有任何其他边界，填充等。

这是我的CSS：

#wrap {
    width: 1600px;
    margin: 0 auto;
    background-color: red;
}

.image {
    width: 300px;
    margin: 8px 10px 0 10px;
    vertical-align: text-top;
}

我的HTML看起来像这样：

<div id="wrap">
<div id="portfolio">
    <section>
        <a><img></a>
        <a><img></a>
        <a><img></a>
        <a><img></a>
        <a><img></a>
    </section>
    <section>
        <a><img></a>
        <a><img></a>
        <a><img></a>
        <a><img></a>
        <a><img></a>
    </section>
</div>

Answer 1

...但最后一张图片正在撞到下一行。为什么不呢嵌合？

您遇到的问题是white-space margin。

内联元素的右/下边缘有一个小的边距，使您的计算错误。

解决此问题的最简单方法是将wrap设置为display: flex

Answer 2

问题的原因：

在你的示例代码中，它实际上是将achors之间的空白变成空格（每个空间宽4px）。

因此，它实际上只显示anchor,anchor,anchor...等anchor,space,anchor,space...

<强>解决方案：

你可以只使用图像（没有锚点）并删除每个图像之间的空白，或者你可以浮动锚点：

a { float: left; }

这是一个功能性的JSfiddle，它显示通过删除<img>标记之间的锚点和空格，它允许它们全部在同一行中，即使没有浮动：

https://jsfiddle.net/q6ubzp0t/

Answer 3

这是您的解决方案将此添加到您的样式，它将正常工作

a{
  float: left;
}

图像在div中没有正确居中

3 个答案:

图像在div中没有​​正确居中

3 个答案:

图像在div中没有正确居中