帶浮動的圖像：帶浮動的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%; 
}