显示块不适用于浮动div中的图像

Question

我有一张图片，旁边有一些文字。我有一个标题，我不能在自己的行上，所以我设置它显示：块但它不起作用。我不能为我的生活弄清楚。它似乎工作，当我没有浮动。

这是一张帮助说清楚的图片。我想要的形象＆＃39; Fin MCool＆＃39;是显示块

这是我的代码： 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

问题不在于块显示，所有图像都在代码中显示为块。你的问题是第二张图片违背你的意愿得到float: left（你只希望第一张图片漂浮）。

这是因为.staff img的规则正在修改.staff中的所有图片，而不仅仅是你想要的直接孩子。最简单的解决方法是

.staff > img {

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

Answer 2

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

     .staffContent img 
     {
        display: block;
     }
     .staffContent 
     {
        width:60%;
        float:left;
     }
    .staffContent img
    {
        float: none;
    }

<强> DEMO

Answer 3

Demo here

Css

.staffContent img.heading{
    float:none;
}

html中的一些变化

在 .staffContent 容器下为img .heading提供课程。

<img src="http://purestrategic.com/wp-content/uploads/2013/10/typography-unnamed-cbffa-x-hd-jootix-66808-300x168.jpg" alt="" width="200" height="40" class="heading">

Answer 4

只需将float:none添加到.staffContent img

即可

<强> DEMO