Question

以下是我的CSS代码：

.portrait
{
	width: 400px;
	position: relative;
	display: inline-block;
	background-color: #4E5555;
}

.portrait img
{
	width: 150px;
	float: left;
	padding-right: 20px;
}

.portrait h4
{
	text-align: left;
	margin: 0px 0px 0px 0px;
	color: #fff;
}

以下是我的相关HTML代码：

<div class="portrait">
	<img src="images\filmmakers\Aboui, Julian\JulianAboui-web.jpg">
	<h4>Julian Aboui</h4>
</div>
							
<div class="portrait">
	<img src="images\filmmakers\Alter, Aaron\AaronAlter-web.jpg">
	<h4>Aaron Alter</h4>
</div>
							
<div class="portrait">
	<img src="images\filmmakers\Abrahams, Pia\PiaAbrahams-web.jpg">
	<h4>Pia Abrahams</h4>
	<h4>STUFF STUFF STUFF STUFF STUFF STUFF STUFF STUFF STUFF STUFF STUFF</h4>
</div>

<div class="portrait">
	<img src="images\filmmakers\Asnani, Shailen\ShailenAsnani-web.jpg">
	<h4>Shailen Asnani</h4>
</div>

我的输出如下： http://i.imgur.com/YRkJvmn.png

我想我知道问题是什么，但我不确定如何解决它。最后一个容器元素（在右下方）放置得更深，因为它认为它在文本下面。那是对的吗？我不确定如何解决这个问题。

感谢任何帮助，谢谢！

Answer 1

Divs很挑剔。我建议使用ul with display：block inline。只需查看网站的页面源代码，您就可以在其中看到类似的工作内容。我的CSS中的一个片段在哪里工作（我在里面有一个文本和多个图像的div）

div.list_holder {margin-bottom: 10px; clear: both; font-style:normal;}
ul.user_list    {display:block; margin: 0px auto;}
li.list_item    {list-style: outside none none; margin-right: -100%;
                 position: relative; padding: 0px; clear: none;
                 margin-bottom: 10px !important;
                 border: 2px solid !important; min-height: 325px;
                 max-width: 206px; float: left; margin-right: -100%;
                 width: 23.5%;border-radius: 2px;}

Answer 2

不确定，但一个简单的解决方案是将其显示为表

.row {
    display:table-row;
}
.portrait
{
	width: 400px;
	position: relative;
	display: table-cell;
	background-color: #4E5555;
}

.portrait img
{
	width: 150px;
	float: left;
	padding-right: 20px;
}

.portrait h4
{
	text-align: left;
	margin: 0px 0px 0px 0px;
	color: #fff;
}

并在<div class='row'>

中包装所需的两行

Answer 3

在我看来，为了定位这些容器你不需要起诉位置：相对的，如果你有一个更大的容器/包装，它包裹肖像，并通过边缘定位。在这种情况下，您可以使用保证金来定位您的容器。另外，如果你想要更好地设置它们的样式并使它们显示，最好使用图形标记：如果你想让文字在图像下面，则阻止它。

CSS容器之间的差距很大

3 个答案: