css - 带有浮点数的图像：在带有浮点数的 div 内：左

Question

我想在页面的右侧有一段文字。并漂浮在它上面，就像这张照片一样。

我的逻辑是给“Left div”一个 float:left 和一个定义的宽度，并给 Right div 一个 float:right 和一个定义的宽度。然后给我的图像一个浮动：对。

然而，我最终得到的是图像出现在文本的右侧。这对我来说没有意义，因为图像超出了它所在的 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%;
}