0

我有四个图像，它们水平放置在彼此旁边。我正在尝试将文本放在每个图像下方。这就是我现在所拥有的。

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 { 显示：块；浮动：底部；填充：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

浮动：底部？？

如果你想居中，你需要 4 个独立的 div 彼此相邻浮动，包含在父 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 回答