Question

我正在尝试设计一个页面，左边是浮动图像，右边是div，文本和块元素在图像周围流动，然后在图像下面有更多的div。请参阅此代码{/ 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>

大图像将设置为特定宽度，其高度设置为＆＃34; auto＆＃34;。

我无法将绿色边框div（class =＆＃34; extra-content＆＃34;）嵌入到大图像正下方的空间中，并且仍然具有红色的文本和块元素-bordered div（class =＆＃34; content＆＃34;）正常流动。我尝试了多种明确的组合：在各种元素中并重新排序div。

我希望它看起来简单，我没有看到。

Answer 1

我让你的小提琴工作：

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

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

作为一个修复，我创建了另一个容器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/

希望这有帮助！

在图像周围和下方浮动div

1 个答案: