0

単純な 7 X 3 テーブル/グリッド ビューに画像を配置しようとしています。

しかし、私は望ましい結果を得ていません..おそらく私は非常に間違った場所を見ています.

ビューアーなどを作成したくありません..

画像を 7 X 3 グリッド ビューで表示するだけです。

.floated_img
{
    margin-left: 10px
    width:140px; /* you can use % */
    height: auto;

}

<div class="floated_img">
    <img src="Picture1.png" alt="Some image">

</div>
<div class="floated_img">
    <img src="Picture2.png" alt="Another image">

</div>
....

すぐにダウンロードして画像を配置するために使用できるテンプレートはありますか。

私は画像を持っています..それらをきれいなテーブルビューに並べて、スクリーンショットを撮りたいだけです..

4

2 に答える 2

1

テーブルを扱いたくない場合は、画像をLI次の場所に配置できます。

ul {
    line-height: 0;
    font-size: 0;
}
li {
    display: inline-block;
    width: 14.28%; /* 100%/7 */
}
li img {
    display: inline-block;
    max-width: 100%;
}

http://jsfiddle.net/NnrEv/

于 2013-03-08T21:15:13.240 に答える
1

フローティング ソリューションを探している場合は、http://jsfiddle.net/fSzxb/1/を確認してください。

.floater {
    float:left;
    ...
}
.floater.first {clear:both;}

/*clearfix*/
.cf:before,.cf:after {content: " "; display: table;}
.cf:after {clear: both;}
.cf {*zoom: 1;}

そしてあなたのhtml

<div class="cf">
    <div class="floater first"></div>
    <div class="floater"></div>
    <div class="floater"></div>
    <div class="floater"></div>
    <div class="floater"></div>
    <div class="floater"></div>
    <div class="floater"></div>
    <div class="floater first"></div>
    <div class="floater"></div>
    <div class="floater"></div>
    <div class="floater"></div>
    <div class="floater"></div>
    <div class="floater"></div>
    <div class="floater"></div>
    <div class="floater first"></div>
    <div class="floater"></div>
    <div class="floater"></div>
    <div class="floater"></div>
    <div class="floater"></div>
    <div class="floater"></div>
    <div class="floater"></div>
</div>

もちろん、 floater と cf の代わりに、より意味のあるクラス名を使用できます

于 2013-03-08T21:20:29.220 に答える