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

來源

2015-04-03 jamiestroud69

在你加入這個img類

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

希望它會幫助你。

來源

2015-04-03 10:51:46

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>

來源

2015-04-03 11:09:39 Muhammad

最終將整個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>

來源

2015-04-05 20:17:06 jamiestroud69

Div Br圖像列1px未對齊

回答

相關問題