Question

好的，我有一个960像素宽的div。

我有一张图片，在div中，宽度为640px，我想要另一个带有文本的div，宽度为320px。当我这样做并将图像向左浮动而另一个div向右浮动时，就会发生这种情况。

http://i.stack.imgur.com/qRleq.jpg

图像和“VOOR WIE”必须位于白色部分，并设置了最小高度。

我该如何解决这个问题？

HTML：

<h2 id="pagetitle">ADEMHALING</h2>
<div id="foto"></div><div id="floatright"><h4 id="pagecontent">VOOR WIE</h4></div>

CSS：

#foto {
display: block;
width: 640px;
background-image: url(../images/ademhaling.png);
background-size: cover;
background-repeat: no-repeat;
height: 320px;
float: left; }
#floatright {
width: 310px;
border-top: #CCC 1px solid;
border-left: #CCC 1px solid;
float: right; }

JSFIDDLE

Answer 1

这是因为你的浮动元素超出了'文档流'（这是浮动元素的正常行为）。

你可以做的是为你的白色部分元素设置一个overflow: hidden，这会强制浮动元素留在“包装器”中。

jsFiddle

#content元素代表您网站的白色部分。

<小时/> Succes verder！

Answer 2

添加一个明确的div：

<h2 id="pagetitle">ADEMHALING</h2>
 <div id="foto"></div>
 <div id="floatright">
 <h4 id="pagecontent">VOOR WIE</h4>
 <div class="clear"></div>
</div>

给你的css添加：

.clear{
  clear:both;
}

Answer 3

尝试添加“box-sizing：border-box;”对于floatright div

#floatright 
{
    width: 320px;
    border-top: #CCC 1px solid;
    border-left: #CCC 1px solid;
    float: right; 
    box-sizing:border-box;
   -moz-box-sizing:border-box; /* Firefox */
}

图像旁边的文字

3 个答案:

jsFiddle