在图像周围和下方浮动 div

Question

我正在尝试设计一个页面，左侧有一个浮动图像，右侧有一个 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="内容”）正常流动。我尝试了 clear: 在各种元素中的多种组合并重新排序 div。

我希望这是我没有看到的简单的东西。

Answer 1

我让它在你的小提琴中工作：

http://jsfiddle.net/BcjzK/4/

由于 div 布局的工作方式，如果它在 HTML 代码中出现在红色 div 之后，它总是会在红色 div 下方启动绿色 div，除非您将它放在封装整个左侧的父容器中。

作为修复，我制作了另一个容器 div，它可以同时容纳 img 和绿色 div，然后将该容器向左浮动。

HTML：

<div class="container">
<div class="imgContainer">
    <img src="http://hazelden.ca/sample.png" alt="Some Image" width="320" height="auto" />
    <div class="extra-content">
        Text
    </div>
</div>
<div class="content">
...

CSS：

.container {
width:700px;
border:solid 1px gray;

}

.imgContainer{

 float: left;

}
.content {
 width:460px;
 border:solid 1px red;
 margin-right:0px;
 margin-left:auto;

}
.extra-content {
 width:230px;
 border:solid 1px green;
}
img {

 border:solid 1px blue;
}
blockquote {
 border:solid 1px gray;
 width:30%;
 float:right;
}

编辑：

我注意到 imgContainer 框会强制您的内容文本稍微改变位置以适应它的存在。如果您希望内容文本的布局与之前完全相同，请使用：

.imgContainer{  
 float: left;
 height: 450px;
 overflow: visible;    
}

http://jsfiddle.net/BcjzK/5/

您甚至可以通过将imgContainer的height属性更改为430px，使图片下方的内容文本尽可能靠近侧面。

http://jsfiddle.net/BcjzK/6/

希望这会有所帮助！