html - CSS容器之间的奇怪差距

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 与 display:block 内联使用。只需查看网站的页面源代码，您就可以在其中看到类似的功能。我的 css 中的一个片段(我在 li 中有一个带有文本和多个图像的 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;}