使用CSS移動在文本流圖像右側

Question

我沿着這些線路的一些基本標記：

<div class="page_content"> 
    <p>A paragraph of text.</p> 
    <p>Another paragraph of text.</p> 
    <img src="image.jpg" /> 
    <p>Some more text.</p> 
</div> 

段落被限制在尺寸，即.page_content p{min-width:24em;max-width:36em}。我正在尋求一個響應式佈局。

在大瀏覽器寬度我想圖像移出文本的主流程，以實現沿着這些線的佈局（在HTML NB圖像上面可能不匹配如下所示位置！）：

 
    ===== = Image 

    -------- 
    -------- 
    -------- 

    -------- ====== 
    -------- ====== 
    -------- ====== 
    -------- 

    -------- 
    -------- 
    -------- 

如果我的圖像是float:right，它們會跳出文本，並且它們的頂邊與他們的「父」段一致。但是，它們一直對齊到頁面的右側。我似乎無法找到一種方法讓他們齊心協力地坐在段落的右側。

我不想將圖像移出主page_content div，因爲在小屏幕寬度下，我期望圖像與文本響應式設計出現在相同的「列」中。

關於如何實現這一點的任何想法？可能嗎？我花了幾個小時玩耍，但沒有一個更聰明！

Answer 1

我會做一些沿此線： http://jsfiddle.net/RjDaS/16/

我會在一個div包裹每paragraf標籤（這其中有一個叫做類部分），讓圖像是在它旁邊。這也適用於您的響應式設計。不過，我無法讓您的圖片留在page_content div中。

<div class="page_content"> 
    <p>A paragraph of text.</p> 
    <div class="Section"> 
     <p>Another paragraph of text.</p> 
     <img src="image.jpg" /> 
    </div > 
    <p>Some more text.</p> 

</div> 

CSS：

.Section p{ 

    float:left; 
    /*min-width:24em;*/ 
    max-width:36em; 
     margin-right:10px; 
} 
.Section img{ 
    float:left; 
} 
.Section{ 
    overflow:hidden; 
} 
​ 
​ 

編輯：新增浮法左邊，這樣它會貼近p標籤。 （刪除最小寬度爲更好的可視化）