如何使用CSS列/网格来设置文本和图像拼贴布局

Question

我使用的是旧的Skeleton css版本，它是一个16列网格系统。我正在尝试设置类似的布局在这张照片。

https://i.stack.imgur.com/1v6K8.jpg

我很新的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:

//类"columns"是需要内容的"block" (div)。我已经做了一个CSS的背景色，高度和宽度。

//在div "columns "中创建新的列，编号为1、2和3。我把所有的文字都移到左边，并给它留了边距。第一，第二和第三的边距为15px(上，右，下，左)。

//在div列columns中，我创建了一个文本区域，边界为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%;}