css - 连续显示 3 张图像

Question

有问题。我需要使用 Foundation CSS Framework 在水平线上显示 3 个图像。

请看这张图:

所以在图片的顶部有一张图片，已经可以使用了。这是源代码:

<div class="row">
  <div class="twelve columns text-center">
    <div class="six columns centered">
      <a href="" target="_blank">
        <!--div class="hollow-button">
          <h2 class="text-xbold text-white">

          </h2>
        </div-->
        <img src="/images/bg-logo.png" class="bg-logo" />
      </a>
    </div>
  </div>
</div>

我不明白，如何使用这个框架，我可以连续放置 3 张图像？

Answer 1

使用Block grid .

<ul class="small-block-grid-3">
  <li><!-- image --></li>
  <li><!-- image --></li>
  <li><!-- image --></li>
</ul>

这将在所有屏幕上显示三个相等的列。