带图像的三分之一/二分之一布局

Question

我是新手 - 所以这是我的问题：

我正在尝试使用基础 4.0.8 制作三分之一/三分之二的布局。 （整个事情需要响应） 在移动设备上应该是这样的：1 张图片 - 2 张小图片 - 1 张图片。

桌面布局：

到目前为止，我的方法是：使用正确的网格设置制作 div -> 插入第二个 div，其中包含 12 个大网格，其中包含图像。

到目前为止一切都很好，但现在我对图像感到困惑：大 4 div 的高度与另一个不同。 :(

HTML：

<div class="row">
  <div class="large-8 small-12 columns">
      <div class="large-12">
          <a href="#"><img src="http://placehold.it/800x300"></a>
      </div>
  </div>
  <div class="large-4 small-6 columns">
      <div class="large-12">
          <a href="#"><img src="http://placehold.it/800x300"></a>
      </div>
  </div>
  <div class="large-4 small-6 columns">
      <div class="large-12">
          <a href="#"><img src="http://placehold.it/800x300"></a>
      </div>
  </div>
  <div class="large-8 small-12 columns">
      <div class="large-12">
          <a href="#"><img src="http://placehold.it/800x300"></a>
      </div>
  </div>
</div>

Answer 1

这是因为每个网格元素的实际内容控制着高度和宽度（内容区域）。看看我的意思是用panel 替换你的每个img 元素并写一些不同的文本。您会看到每个面板的高度不同。这是一个例子：

<div class="row">
      <div class="large-8 small-12 columns">
          <div class="large-12">
              <div class="panel">
                  <p>Chocolate cake jujubes donut pudding. Jujubes gummies soufflé topping chupa chups chocolate cake. Halvah carrot cake icing dragée. Donut caramels lemon drops cupcake. Pudding sugar plum lemon drops sesame snaps icing dessert. Tootsie roll caramels chupa chups marzipan sweet roll wafer. Jelly-o icing lemon drops cake chupa chups marshmallow bear claw. Oat cake bonbon tiramisu bonbon. Chocolate bar tart ice cream macaroon cake dragée gingerbread.</p>              
                </div>
          </div>
      </div>
      <div class="large-4 small-6 columns">
          <div class="large-12">
              <div class="panel">
              <p>Caramels tiramisu liquorice. Chocolate faworki brownie dragée wafer. Lemon drops tart bear claw wafer. Tootsie roll candy canes faworki lollipop bear claw bonbon sesame snaps jelly-o.  Danish sesame snaps toffee lollipop tootsie roll. Macaroon lollipop jelly-o pie gummi bears danish gummies jelly-o gingerbread. Pie croissant jujubes lollipop fruitcake icing. Fruitcake sweet roll cotton candy halvah gummi bears oat cake powder. Danish pudding toffee wypas bonbon macaroon lollipop faworki tiramisu.</p>
                </div>
          </div>
      </div>
      <div class="large-4 small-6 columns">
          <div class="large-12">
              <div class="panel">
              <p>Biscuit marshmallow wypas tootsie roll tart candy icing. Halvah faworki danish brownie chocolate cake candy. Carrot cake cotton candy donut lollipop pie oat cake. Sweet toffee pudding soufflé marshmallow donut chocolate bar. Gummi bears gummi bears brownie halvah cookie liquorice biscuit tart. Halvah cupcake tiramisu jelly beans apple pie liquorice fruitcake jelly beans. </p>
                </div>
          </div>
      </div>
      <div class="large-8 small-12 columns">
          <div class="large-12">
              <div class="panel">
              <p>Sesame snaps marzipan sugar plum wypas soufflé danish. Candy jelly-o topping biscuit sesame snaps gingerbread chocolate soufflé chupa chups. Jelly marshmallow wypas apple pie candy canes halvah cake. Ice cream biscuit icing jujubes lemon drops. Marshmallow biscuit cotton candy muffin. Bear claw pudding cookie. Soufflé jujubes gummi bears jujubes muffin. Wafer croissant marzipan apple pie tootsie roll jelly beans tootsie roll pudding.</p>
                </div>
          </div>
      </div>
    </div>

现在，如果您希望所有图像具有相同的高度，那么您可以为每个 img 添加一个类，例如 grid-img，例如 <img src="http://placehold.it/800x300" class="grid-img">，然后将其定义为：

.grid-img {
    height: 150px;
    width: 100%;
}

请注意，图像可能会变形，看起来不太好，因为它们会被拉伸到网格的最大宽度（例如 8 列）和高度（例如 150 像素）。这是图像大小调整工具派上用场的地方。