如何使用CSS列/網格來設置文本和圖像拼貼布局？

Question

我使用的是較早的Skeleton css版本，它是一個16列的網格系統。我正在嘗試設置與此圖片類似的佈局。

http://imgur.com/sIV2aYo

我非常新的CSS，用兩個容器（一個在另一個內部）適當的方法？

這裏是什麼，我一直在努力，但事先不工作了太清楚=（

<div class="container"> 
 
    <div class="eight columns alpha"> 
 
    <div class="image"> 
 
     <img alt="" src="images/coffee.jpg"> 
 
    </div> 
 
    </div> 
 

 
    <div class="eight columns omega"> 
 

 
    <div class="container"> 
 
     <div class="eight columns"> 
 
     <img alt="" src="images/plate.jpg"> 
 
     </div> 
 

 
     <div class="eight columns"> 
 
     <img alt="" src="images/macaro.jpg"> 
 
     </div> 
 

 
     <div class="text area"> 
 
     <p class="quote">"One of my favorite parts of using Square Register is being able to talk to customers while I am swiping their cards."</p> 
 

 
     <p class="name">Norm Mui, Coffee Foundry</p> 
 
     </div> 
 
    </div> <!-- 2nd container --> 
 
    </div> 
 
</div> <!-- 1st container -->

感謝一個示例代碼。

Answer 1

我不知道你的CSS，但也許這可以幫助你：

HTML：

//「列」類是你需要內容的「塊」（div）。我製作了一個背景顏色，高度和寬度的CSS。

//在該div「列我們創建新的」列中，編號爲1,2和3.我將所有文本都浮動到左側並給它一個邊距。第一個，第二個和第三個邊距爲15px（頂部，右側，按鈕和左側）。

//在div列「列」中我做了一個textarea，邊距爲15px。垂直對齊用於頂部垂直對齊。與顯示我們意味着它需要在塊中，有40％的餘量（佔塊的40％）。

<div id="container"> 
     <div class="columns"> 

      <div class="eight-columns-1"> 
     <img alt="" src="http://ww1.prweb.com/prfiles/2014/04/10/11752526/gI_134971_best-image-web-hosting.png"> 
     </div> 

     <div class="eight-columns-2"> 
     <img alt="" src="http://www.causingeffect.com/images/made/images/example/cow_100_100_c1.jpg"> 
     </div> 

     <div class="eight-columns-3"> 
     <img alt="" src="http://www.causingeffect.com/images/made/images/example/cow_100_100_c1.jpg"> 
     </div>  

     <div class="textarea"> 
     <p class="quote">"One of my favorite parts of using Square Register is being able to talk to customers while I am swiping their cards."</p> 

     <p class="name">Norm Mui, Coffee Foundry</p> 
     </div> 
    </div> 
    </div> 

CSS：

.columns {background-color:yellow; width: 530px; height: 285px;} 

.eight-columns-1 {float:left; margin: 15px;} 

.eight-columns-2 {float: left; margin: 15px;} 

.eight-columns-3 {float:left; margin: 15px 15px 15px 0px;} 

.textarea {vertical-align:top; margin: 15px; display:inline-block; width: 40%;}