2

タイトルが本当の問題かどうかはわかりませんが、横にスクロールした画像のリストがうまく再生されません。すべての画像を互いに並べて束ねる（効果的に浮かせる）必要があります（これdisplay:inlineまでのところ、これを使用して達成できました）。しかし、それらをすべてウィンドウ/ボディの 100% の高さにしたいのですが、うまくいきません。

ここに私のHTMLがあります：

<body>
    <div id="content">
    <ul id="content-images">
        <li>
            <img src="image1.jpg"/>
        </li>
            <li>
            <img src="image2.jpg"/>
        </li>
            <li>
            <img src="image3.jpg"/>
        </li>
        </ul>
    </div>
</body>

そしてCSS：

html, body{

    margin:0px;
    border:0px;
    padding:0px;

    height:100%;

}

#content{

    height:100%;
    background-color:green;

}

#content-images{

    height:100%;

  white-space: nowrap;

}

#content-images li{

    font-size:0;
    display:inline;

    height:100%;

}

#content-images img{

    max-height:100%;
    height:auto;
    max-width:100%;
    width:auto;

}

問題は、li アイテムの下部に沿って走る約 2/3 ピクセルの小さなギャップです。それが の一部なのbodyか の一部なのかを判断するのは難しいですlist itemsが、いずれにせよ厄介な異常です。

Chrome で表示しています。スクリーンショットを添付しました。下の白い線に注意してください。明確にするために、画像が x 軸でページからはみ出し、クライアントが画像を水平方向にスクロールできることを嬉しく思いますが、画像とウィンドウの端。

スクリーンショット

アップデート：

htmlフィドルは、bodyおよび比較的サイズの大きい画像のスタイリングに問題があるように見えるため、jsFiddle で問題を再現することはできません。理由を理解する時間も忍耐力もありません。

ハックに行くことにしました。imgとhtmlおよびbodyvertical-align:bottomの混合。_ これにより、表示可能な領域が制限されるため、リスト項目の後の空白が冗長になります。overflow-y:hidden

4

4 に答える 4

2

vertical-align: bottom次のように、イメージタグを使用してこれを防ぐことができます。

img {
  vertical-align: bottom;
}

これが役に立ったことを願っています。

于 2013-08-25T14:34:13.793 に答える