带浮动的图像：带浮动的div内右：

Question

我想在页面的右侧有一段文字。并且像这张照片一样浮起来。

我的逻辑是给“左div”一个float：left和一个定义的宽度，并给右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%; 
}