Question

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

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

桌面布局：

到目前为止我的方法：使用正确的网格设置制作div - ＆gt;插入一个带有大12格的第二个div，其内部是图像。

到目前为止一切顺利，但现在我对图像感到困惑：大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

这是因为每个网格元素的实际内容控制高度和宽度（内容区域）。要查看我的意思，请使用img替换每个panel元素，并撰写不同的文本。您将看到每个面板具有不同的高度。这是一个例子：

<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像素）。这是图像大小调整工具派上用场的地方。

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

1 个答案: