连续显示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>

在所有屏幕上都有三个相等的列。

Answer 2

只需使用.large-4.columns

即可

   <section id="main-content">     
         <div class="row"><img src=""/></div>
         <div class="row">
             <div class="large-4 columns"><img src=""/></div>
             <div class="large-4 columns"><img src=""/></div>
             <div class="large-4 columns"><img src=""/></div>
         </div>
  </section>