流體設計中的浮動圖像和文本換行

Question

我已經搜索瞭解決問題的解決方案，但無法找到答案。

我有一個流體div，內部是文本和兩個堆疊的圖像顯示內聯。我希望文本在視口縮小時包裝圖像。在移動視口寬度處，圖像需要以100％寬度出現在文本下方，寬度也爲100％。

我已經能夠在桌面寬度上堆疊圖像的唯一方法是將它們放置在具有設置寬度的浮動div中，並將圖像div放置在html中的文本之前。

如果我在文本之後放置圖像div，則文本跨越桌面寬度處的容器寬度，將圖像壓入文本下方。

但是，這是讓圖像在移動視口寬度處的文本下方滑動的唯一方法。

在此先感謝您的任何想法 - 這看起來很簡單，但我無法根據需要使用它。

這是fiddle。

這裏的HTML：

<div class="content"> 

    <div class="primaryContent"> 

     <div class="aboutImage"> 

      <img class="img" src="http://s14.postimg.org/t11gqnz5p/square.png"> 
      <img class="img" src="http://s14.postimg.org/t11gqnz5p/square.png"> 

     </div> 

     <h1>About</h1> 

     <p>A whole bunch of text. A whole bunch of text. A whole bunch of text. A whole bunch of text. A whole bunch of text. A whole bunch of text. A whole bunch of text. A whole bunch of text. A whole bunch of text. A whole bunch of text. A whole bunch of text.</p> 

     <p> A whole bunch of text. A whole bunch of text. A whole bunch of text. A whole bunch of text. A whole bunch of text. A whole bunch of text. A whole bunch of text. A whole bunch of text. A whole bunch of text. A whole bunch of text. A whole bunch of text. A whole bunch of text. A whole bunch of text. A whole bunch of text. A whole bunch of text. A whole bunch of text. A whole bunch of text. A whole bunch of text. A whole bunch of text.</p> 

    </div><!--end primaryContent --> 

    <aside class="sideBar group"> 

     <p>A bunch on content. A bunch on content. A bunch on content. A bunch on content. A bunch on content. A bunch on content. A bunch on content. A bunch on content. A bunch on content.</p> 

    </aside> 

</content> 

而CSS：

.content { 
    width:100%; 
    display:inline-block; 
} 

.primaryContent { 
     display:inline-block; 
     width: 70%; 
     float:left; 
     vertical-align:top; 
     background-color:lightgrey; 
     margin:0; 
     padding:0; 
    } 

.aboutImage { 
     width: 40%; 
     float:right; 
    } 

.img { 
    width: 100%; 
    margin:0; 
    padding:0; 
} 

.img img { 
    width:100%; 
    margin:0; 
    padding:0; 
} 

.sideBar { 
    width:29%; 
    float:right; 
    background-color: lightgrey; 
    border-left: solid 1px black; 
} 

.group:after { 
     content:" "; 
     display:table; 
     clear:both; 
    } 

Answer 1

有一個在你的DOM的佈局。

正如你目前擁有它，你需要添加很多額外的代碼來獲得你正在尋找的移動響應體驗。

我建議你築巢圖像和內容放入容器和浮動整個容器離開

<div class="content"> 

    <div class="leftContent"> 

    <div class="mainContent"> 

      <!--Text Comes Here--> 
    </div> 

    <div class="images"> 

      <!--Images to be here--> 
    </div> 

    </div> 
    <aside class="sideBar group"> 
      <!--Sidebar content here--> 
    </aside> 

這將允許你，你想與media queries使neccecary變化浮動元素。

我已經做了搗鼓你在這裏：http://jsfiddle.net/8QmLL/

還要檢查你的結束HTML標籤。你正在關閉一個</content>，但你應該關閉一個</div>