html - 你如何使用 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:

//“列”类是您需要内容的“ block ”(div)。我制作了一个具有背景颜色、高度和宽度的 CSS。

//在那个 div“列中，我们创建了新的”列，编号为 1,2 和 3。我将所有文本 float 到左侧并给它留了边距。第一个、第二个和第三个 margin 为 15px(top、right、buttom 和 left)。

//在 div 列“columns”中，我制作了一个边距也为 15px 的文本区域。 vertical-align 用于顶部垂直对齐。对于显示，我们的意思是它需要在 block 中，边距为 40%(它占 block 的 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%;}