Question

当我以这种方式编码时，只有最后一列的图像不对齐1px。我知道另外两种方法来编码以获得没有错位的结果（使用ul或连续使用多个div而没有任何br），但是它令人失望，因为这对我来说似乎更简单。这是怎么回事？

＆＃13;

    div.a {
    margin: 0;
    overflow: auto;
    padding: 0;
    text-align: center;
    word-wrap: break-word;
    }
    ul.b {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
    }

＆＃13;

    <div class="a">
    <img src="http://www.gloryhood.com/images/free-will-1.png" alt="free will determinism and indeterminism" />
    <br />
    <img src="http://www.gloryhood.com/images/free-will-1.png" alt="free will determinism and indeterminism" />
    <br />
    <img src="http://www.gloryhood.com/images/free-will-1.png" alt="free will determinism and indeterminism" />
    </div>
    <br />
    <ul class="b">
    <li><img src="http://www.gloryhood.com/images/free-will-2.png" alt="daniel wegner's conditions of human action" /></li>
    <li><img src="http://www.gloryhood.com/images/free-will-2.png" alt="daniel wegner's conditions of human action" /></li>
    </ul>

＆＃13;

示例页面（我将ul列仅用于比较）：http://www.gloryhood.com/articles/zzzztest.html

Answer 1

在img课程

中添加此内容

img {
    display: block; /*Add this*/
    height: auto;
    margin: 0 auto;/*Add this*/
    max-width: 100%;
}

希望它会对你有所帮助。

Answer 2

这是因为在前2张图片的末尾有<br />，我通过在最后一张图片的末尾放置一个<br />来解决它并且它有效。

    div.a {
    margin: 0;
    overflow: auto;
    padding: 0;
    text-align: center;
    word-wrap: break-word;
    }
    ul.b {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
    }

    <div class="a">
    <img src="http://www.gloryhood.com/images/free-will-1.png" alt="free will determinism and indeterminism" />
    <br />
    <img src="http://www.gloryhood.com/images/free-will-1.png" alt="free will determinism and indeterminism" />
    <br />
    <img src="http://www.gloryhood.com/images/free-will-1.png" alt="free will determinism and indeterminism" /> <br />
    </div>
    <br />
    <ul class="b">
    <li><img src="http://www.gloryhood.com/images/free-will-2.png" alt="daniel wegner's conditions of human action" /></li>
    <li><img src="http://www.gloryhood.com/images/free-will-2.png" alt="daniel wegner's conditions of human action" /></li>
    </ul>

Answer 3

我找到了另一个解决方案！你可以分割每个单独的图像。

<div>
<img src="link" alt="" />
</div>
<div>
<img src="link" alt="" />
</div>
<div>
<img src="link" alt="" />
</div>

Div Br图像列1px未对齐

3 个答案: