0

現在、画像といくつかのテキストを縦に並べた HTML ページがあります。

<div>
 <img src="img/img1.jpg"/>
 Dr. XYZ
</div>

<div>
 <img src="img/img1.jpg"/>
 Dr. XYZ
</div>

<div>
 <img src="img/img1.jpg"/>
 Dr. XYZ
</div>

私がやろうとしているのは、画像をグリッドに配置することです。2 列のグリッドを作成したい場合、2 列のテーブルを使用できることはわかっています。

しかし、これをハードコーディングしたくありませんか? divグリッドの数を変更するたびにページ全体を再構築する必要がないように、Javascript/CSS のみを使用して一連の s を作成し、それらを任意の列数のグリッドとして配置する別の方法はありますか? .

4

2 に答える 2

1

以下を変更して、グリッドのようなパターンで表示できます

<div style"display:inline-block; float:left">
    <img src="img/img1.jpg"/>
    Dr. XYZ
</div>

次に、画像を含む DIV を含む DIV の幅を変更することで、行数を制御できます。

<div id="container" style="width:500px">
    <div style"display:inline-block; float:left">
        <img src="img/img1.jpg"/>
        Some text 1
    </div>
    <div style"display:inline-block; float:left">
        <img src="img/img2.jpg"/>
        Some text 2
    </div>
</div>
于 2012-10-24T17:35:26.860 に答える
0

はい、できます。以下に例を示します。

<div class="parent">
   <div class="item">
     <img src="img/img1.jpg"/>
     Dr. XYZ
   </div>
   <div class="item">
     <img src="img/img1.jpg"/>
     Dr. XYZ
   </div>
   <div class="item">
     <img src="img/img1.jpg"/>
     Dr. XYZ
   </div>
   ....
   <div class="clear"></div>
</div>

あなたのCSS：

.parent {
   width:900px; /** Just an example **/
}
.clear {
   clear:both;
}

.item {
    float:left;
    width:150px; /** Just an example **/
    margin:3px;
}

これで、画像を含む div がすべて 150px 幅の列に配置されます

于 2012-10-24T17:34:29.873 に答える