0

次のように、順序付けられていないリストに含まれる一連の画像のスタイルを設定しようとしています。

  • 含まれている要素の<ul>全幅を占めます
  • それぞれ<li>が幅の 25% を占めます。<ul>
  • <li>画面のサイズ変更に比例してスケールに含まれる画像
  • 合計 8 つの画像は、それぞれ 4 つの画像の 2 つの積み重ねられた行に配置されます
  • 画像間には、縦にも横にも隙間がありません

上記のリストの最初の 4 つの目的は達成できますが、1 行目と 2 行目の画像の間のギャップを失うことはないようです。

マークアップは次のとおりです。

<div class="container">  
    <ul>
        <li><img src="http://davidangerer.com/i/sample.jpg" alt="Image Description" /></li>
        <li><img src="http://davidangerer.com/i/sample.jpg" alt="Image Description" /></li>
        <li><img src="http://davidangerer.com/i/sample.jpg" alt="Image Description" /></li>
        <li><img src="http://davidangerer.com/i/sample.jpg" alt="Image Description" /></li>
        <li><img src="http://davidangerer.com/i/sample.jpg" alt="Image Description" /></li>
        <li><img src="http://davidangerer.com/i/sample.jpg" alt="Image Description" /></li>
        <li><img src="http://davidangerer.com/i/sample.jpg" alt="Image Description" /></li>
        <li><img src="http://davidangerer.com/i/sample.jpg" alt="Image Description" /></li>
    </ul>
</div>

そして（リセット後の）CSS：

.container { 
    width: 90%
    max-width: 960px;
    margin: 6em auto;
}
.container ul {
    float: left;
    display: block;
    width: 25%;
    height: auto;
}
.container img { 
    max-width: 100%;
    height: auto;
    width: auto\9;    /* fixes a bug in ie8 */
}

ご協力いただきありがとうございます。

乾杯、デビッド

4

2 に答える 2

0

画像はインラインボックスで、ベースライン上に立っています (デフォルト値: vertical-align:baseline;)。これは、下のギャップを説明しています。次のように修正できます。

.container img { 
    max-width: 100%;
    height: auto;
    width: auto\9;    /* fixes a bug in ie8 */
    vertical-align:top;
}

また

.container img { 
    max-width: 100%;
    height: auto;
    width: auto\9;    /* fixes a bug in ie8 */
    vertical-align:bottom;
}

またはインラインボックスをブロックボックスにします

.container img { 
    max-width: 100%;
    height: auto;
    width: auto\9;    /* fixes a bug in ie8 */
    display:block;;
}
于 2013-07-11T22:41:34.950 に答える
0

それらの間の醜いインラインマージンを避けるためdisplay:block;に、画像とs を設定する必要があります。この動作中の jsFiddleliをチェックしてください

.container img { 
    display:block;
    max-width: 100%;
    height: auto;
    width: auto\9;    /* fixes a bug in ie8 */
}

.container ul li{ display:block; }
于 2013-07-11T22:37:48.043 に答える