以下是我的 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
我想我知道问题出在哪里,但我不确定如何解决它。最后一个容器元素(在右下角)被放置得更靠下,因为它认为它在文本下面。那是对的吗?我不确定如何解决这个问题。
感谢任何帮助,谢谢!
最佳答案
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;}
关于html - CSS容器之间的奇怪差距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29637729/