0

横に並べて配置された4つの画像があります。これらの各画像の下にテキストを配置しようとしています。これは私が今持っているものです。

HTML

<div class="team">
<h3>Our Team</h3>
<img src="image.jpg" width="200px" height="200px" hspace="20" /> <h3>John Doe</h3>
<p>Text</p>
<p>Text</p>
<img src="image.jpg" width="200px" height="200px" hspace="20" /> <h3>John Doe</h3>
<p>Text</p>
<p>Text</p>
<img src="image.jpg" width="200px" height="200px" hspace="20" /> <h3>John Doe</h3>
<p>Text</p>
<p>Text</p>
<img src="image.jpg" width="200px" height="200px" hspace="20" /> <h3>John Doe</h3>
<p>Text</p>
<p>Text</p>
</div>

CSS

.team {表示：ブロック; float：bottom; パディング：10px; マージン：15px; }

4

3 に答える 3

1

「display：inline-block;」というスタイルのdivタグでそれぞれをラップする必要があります。- このような：

<div style="display:inline-block;">
    <img src="image.jpg" width="200px" height="200px" hspace="20" /> 
    <br><h3>John Doe</h3>  
    <br><p>Text</p>  
    <br><p>Text</p> 
</div>        
<div style="display:inline-block;">
    <img src="image.jpg" width="200px" height="200px" hspace="20" /> 
    <br><h3>John Doe</h3>  
    <br><p>Text</p>  
    <br><p>Text</p> 
</div>
于 2012-08-06T20:29:58.420 に答える
0

フロート：底??

中央に配置する場合は、親divに含まれる4つの個別のdivを隣り合わせにフロートする必要があります。単純。

<div class="left">img,p</div>

CSS

.left {
    Float: left;
    //add padding and margins
}

それがあなたに必要なものです。あなたのためにそれをすべて書き出すことはできません、それはiPadで疲れ果てています。

于 2012-08-06T20:33:31.043 に答える
0

私が理解していることから、あなたはそれを望んでいます：http: //jsbin.com/welcome/8969

于 2012-08-06T20:34:13.273 に答える