浮动图像：右边的div里面有浮动：左边

Question

我想在页面的右侧有一段文字。并且在它上面浮动一张像这张照片中的图像。

我的逻辑是给“Left div”一个浮点数：left和一个定义的宽度，并给右div一个浮点数：右边和一个定义的宽度。然后给我的图像一个浮动：对。

然而，我最终得到的是图像显示在文本的右侧。这对我来说没有意义，因为图像超出了div的定义宽度。

Answer 1

这是答案：http://jsbin.com/iCowUPo/1/edit

屏幕截图：

HTML：

<div class="main">
    <div class="left">
      <img src="http://placekitten.com/200/200" />
    </div>
    <div class="right">
    </div>
    <div style="clear:both;"></div>
  </div>

CSS：

.main{
  background-color:#eee;
  width:500px;
  height:300px;
  overflow:auto;
}

.left{
  width:300px;
  float:left;
  height:300px;
  background-color:#aaa;
  overflow:auto;
}

.left img{
  float:right;
}

.right{
  width:200px;
  float:right;
  height:300px;
  background-color:#bbb;
}

概念：

诀窍在于，如果你float:right你的形象，你也需要清除浮动。我通过将overflow:auto;应用到我的左侧div来做到这一点，这非常有意义。

Answer 2

喜欢这个http://jsfiddle.net/XmWKw/？

html：

<div class="main">
    <div class="left">
        <img src="http://placehold.it/200x200" />
    </div>
    <div class="right">blah blah blah</div>
</div>

css：

.left {
    float: left;
    width: 79%;
    margin-right: 1%;
}
.left img {
    float: right;
}
.right {
    float: right;
    width: 20%;
}