连续显示3个图像

时间:2014-10-03 07:55:06

标签: css3 zurb-foundation

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

请看这张照片:

enter image description here

因此,在图片的顶部有一个图像,已经有效。 这是源代码:

<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张图片?

2 个答案:

答案 0 :(得分:1)

使用Block grid

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

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

答案 1 :(得分:0)

只需使用.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>