html - 为什么我的 CSS 没有被覆盖？

Question

<style type="text/css">
.x-container img {
    float: left;
    margin-right: 15px;
}
.content img{
    clear:both;
}
</style>

<div class="x-container span-18">
    <div class="content">
        <img src="image.jpg" id="disneland-img">
    </div>
    <h2>Hello</h2>
</div>

我有上面的 html。我期待 .content img 中的 clear:both 将覆盖 .x-container img 的 float:left，但事实并非如此。

请问我怎样才能做到这一点？

Answer 1

直接在图像上使用 clearfix 类，这将完成所有工作 将 clearfix 类放在带有内容类的 div 上。

<div class="x-container span-18">
    <div class="content clearfix ">
    <img src="image.jpg" id="disneland-img">
    </div>
<h2>Hello</h2>
</div>

.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    zoom: 1;
}

http://jsfiddle.net/wikijames/TVm6K/