Div Br图像列1px未对齐

问题描述：

当我以这种方式编码时，只有列的最后一张图像没有对齐1px。我知道另外两种编码方式来获得没有错位的结果（使用ul或在一行中使用多个div而没有任何br），但这令人失望，因为这对我来说似乎更加简单。这是什么原因？Div Br图像列1px未对齐

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

示例页面（我列入只是比较UL列）：http://www.gloryhood.com/articles/zzzztest.html

答

在你加入这个img类

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

希望它会帮助你。

This Works，thanks！ – jamiestroud69 2015-04-04 05:43:12

我刚刚注意到，甚至没有必要将img与此代码放在一个div中。在div中是否还有任何用处（搜索引擎含义等）？ – jamiestroud69 2015-04-04 10:56:20

答

这是因为<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>

最终将整个ul放在1px以下，但没关系，@Maddy的解决方案奏效了。另外，由于对搜索引擎和视觉障碍人士的负面影响，我阅读ul li对图片来说并不好。 – jamiestroud69 2015-04-04 05:44:59

答

我发现了另一个解决方案！您可以分隔每个单独的图像。

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

Div Br图像列1px未对齐

相关推荐