我正在尝试设计一个页面,左侧有一个浮动图像,右侧有一个 div,其文本和块元素在图像周围流动,然后在图像下方有更多 div。请参阅http://jsfiddle.net/BcjzK/3/与此代码:
.container {
width:700px;
border:solid 1px gray;
}
.content {
width:460px;
border:solid 1px red;
margin-right:0px;
margin-left:auto;
}
.extra-content {
width:230px;
border:solid 1px green;
}
img {
float:left;
border:solid 1px blue;
}
blockquote {
border:solid 1px gray;
width:30%;
float:right;
}
和
<div class="container">
<img src="http://hazelden.ca/sample.png" width="320" height="auto" />
<div class="content">
<p> Some content, some blockquotes and images</p>
</div>
<div class="extra-content">
Some more text
</div>
</div>
大图像将设置为特定宽度,其高度设置为“自动”。
我无法让绿色边框的 div (class="extra-content") 依偎在大图像正下方的空间中,并且在红色边框的 div (class="content") 中仍然有文本和块元素正常流动。我已经尝试了 clear: 在各种元素中的多种组合并重新排序 div。
我希望这是我没有看到的简单的东西。