連續顯示3張圖片

Question

有一些問題。我需要使用Foundation CSS框架以水平線顯示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>