基礎で等しくグリッドを分割する方法

Question

私は4つの部分に分けられる必要があるセクションのフッターを持っています。 2アップと2ダウン。これを行う方法？私はコードを添付しました。私はそれがほしいと思ったイメージを付けました。

Click to see Image

<div className="footer"> 

     <div className="row full-width"> 

     <div className="large-6 columns"> 
      <div className="row"> 

      <div className="small-12 medium-3 large-4 columns"> 
       <img className="" src="" alt="logo"/> 
          <div className="contact-info"> 
           <p className="address">address</p> 
           <p className="email"><a href="mailto: "></a>mail</p> 
           <p className="tele"><a href="tel:">53343</a></p> 
          </div>  
      </div> 

      <div className="small-6 medium-3 large-8 columns"> 

      <div className="row"> 
       <ul className="list-unstyled "> 
         <li className=".large-6 columns"> 
          <img className="" src="img/transport-icon.jpg" alt="transport-icon"/> 
          <p className="text-uppercase">Fast Shipping</p> 
         </li> 
          <li className=".large-6 columns"> 
          <img className="" src="img/transport-icon.jpg" alt="transport-icon"/> 
          <p className="text-uppercase">Free Return</p> 
         </li> 
          <li className=".large-6 columns"> 
          <img className="" src="img/transport-icon.jpg" alt="transport-icon"/> 
          <p className="text-uppercase">Price Gurantee </p> 
         </li> 
          <li className=".large-6 columns"> 
          <img className="" src="img/transport-icon.jpg" alt="transport-icon"/> 
          <p className="text-uppercase">Online Support</p> 
         </li>  
       </ul> 
      </div> 
      </div> 


      </div> 
      </div> 

      <div className="large-6 columns"> 
      <div className="row"> 

     </div> 
     </div> 
     </div> 
    </div> 

おかげ

Answer 1

あなたの要素からすべてのclassNameプロパティを削除し、ちょうどclassを使用する必要があります。 Docsに記載されているように、基礎のグリッドは<div class="">要素で動作しますので、コードはちょっとしたものです。 http://foundation.zurb.com/sites/docs/grid.html#basics

をとフッターの仕組みは次のように次のようになります：

はこちら続きを読む働い

<div class="row footer"> 
    <div class="small-6 columns"> 
     <img src="..."> 
     <p>some text</p> 
    </div> 
    <div class="small-6 columns">...</div> 
    <div class="small-6 columns">...</div> 
    <div class="small-6 columns">...</div> 
</div><!-- end of row -->