css - 显示 block 不适用于 float div 中的图像

Question

我有一张图片，旁边漂浮着一些文字。我有一个标题，我不想在它自己的行上，所以我将它设置为 display:block 但它不起作用。我这辈子都弄不明白。当我没有让它 float 时，它似乎可以工作。

这里有一张图片可以帮助说明这一点。我希望图像“Fin MCool”成为显示 block

这是我的代码: http://jsfiddle.net/zq7C6/

HTML

 <div class="staff">
<img src="../assets/images/fin.jpg" alt="">
    <div class="staffContent">
        <img src="../assets/images/fintitle.png" alt="">
        <p>Stunt pilot with the Red Arrows (UK airforce stunt team), has    served in combat choppers in 3 recent wars, and fears nothing except small dogs and single women.</p>
        <p>Owns an Extra EA-200 for the ultimate full stunt flight experience, and flies all our other fixed wing craft much more sedately when required. And, yes, that is his real name. He's Irish and he doesn't want to talk about it.</p>
    </div>
</div>

CSS

 .staff{
color:#001D5D;
margin-left: 10px;
 }

.staff img {
float:left;
 }

 .staffContent img {
display: block;
 }

 .staffContent {
width:500px;
float:left;
 }

Answer 1

问题不在于 block 显示，所有图像在您的代码中都显示为 block 。你的问题是第二张图片得到了 float: left 违背了你的意愿(你只想让第一张图片 float )。

这是因为 .staff img 的规则正在修改 .staff 中的所有 图像，而不仅仅是您可能想要的直接子图像.最简单的修复是

.staff> img {

选择器之间的>表示只有直接的子元素。