創建一個圖像，使用基礎框架填充兩行

Question

我剛剛進入Web開發一段時間，有些主題仍然讓我感到困惑。我發現，如果我每週都會訪問一個網頁並嘗試複製他們創建網站的方式，那麼我將從中體會到很多。

這周我在尋找一個網站進行反向工程，我碰到這個人來： http://www.nevrisfurs.com

我瞭解到，使用表格排版這是一個非常糟糕的主意和壞的做法。有些人建議使用基金會複製該網站的視覺效果。

我遇到問題的地方在於採用兩行（實質上）的較大圖像。

我開始看我是否可以用Foundation來做，但我被卡住了，我一直在閱讀文檔，Grid部分似乎沒有什麼能夠讓圖像填充兩行，同時保留第二行的以下圖像的狀態。

是啊，這是一個很多話，讓我帶一些代碼：

<div class="row"> 
    <div class="small-3 columns"> 
     <img src="http://www.nevrisfurs.com/sites/all/themes/custom/nevris/images/home-company.jpg"> 
    </div> 
    <div class="small-3 columns"> 
     <img src="http://www.nevrisfurs.com/sites/all/themes/custom/nevris/images/home-news.jpg"> 
    </div> 
    <div class="small-6 columns"> 
     <img src="http://www.nevrisfurs.com/sites/all/themes/custom/nevris/images/home-collection-2014.jpg" > 
    </div> 
</div> <!-- /first row --> 

<div class="row"> 
    <div class="small-6 columns"> 
     <img src="http://www.nevrisfurs.com/sites/all/themes/custom/nevris/images/home-video.jpg"> 
    </div> 
</div> <!-- /second row --> 

正如你所看到的，第二行圖像顯示在大圖像的下方。無論如何，讓它看起來像我提到的網站？

謝謝！

P.S：我已經修改了foundation.css中的行類，使max-width：100％;

Answer 1

你用行明智的變化逐列，使用下面的代碼

<style> 
img {width:100%; height:auto} 
</style> 
     <div class="row"> 
      <div class="small-6 columns"><!-- /first Column --> 
       <div class="row"> 
        <div class=" small-6 columns"> 
         <img src="http://www.nevrisfurs.com/sites/all/themes/custom/nevris/images/home-company.jpg"> 
        </div> 
        <div class="small-6 columns"> 
         <img src="http://www.nevrisfurs.com/sites/all/themes/custom/nevris/images/home-news.jpg"> 
        </div> 
        <div class="small-12 columns" > 
         <img src="http://www.nevrisfurs.com/sites/all/themes/custom/nevris/images/home-video.jpg"> 
        </div> 
       </div><!-- /end first Column --> 
      </div> 
      <div class="small-6 columns" ><!-- /second Column --> 
       <img src="http://www.nevrisfurs.com/sites/all/themes/custom/nevris/images/home-collection-2014.jpg" > 
      </div> 
</div> 

Answer 2

雅，你可以用粉底缺省類做..

基金會是一個column based grid structure ..try組織他們在列並將它們按行排列。

所以有兩列等寬，一列有three pics第二個有one large pic。

的first column具有two rows一個具有相等寬度6-columns each排和第二排有一個大的PIC 12 columns

.row{ 
 
max-width:none !important; /* dosent work with out !importantfor snippet. Order of css is messed up with snippet */ 
 
}

<link href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.7/css/foundation.min.css" rel="stylesheet"/> 
 
<div class="row"> 
 
    <div class="large-6 columns"> 
 
     <div class="row"> 
 
     <div class="small-6 columns"> 
 
      <img src="http://www.nevrisfurs.com/sites/all/themes/custom/nevris/images/home-company.jpg"> 
 
     </div> 
 
     <div class="small-6 columns"> 
 
      <img src="http://www.nevrisfurs.com/sites/all/themes/custom/nevris/images/home-news.jpg"> 
 
     </div> 
 
     </div> 
 
     <div class="row"> 
 
     <div class="small-12 columns"> 
 
     <img src="http://www.nevrisfurs.com/sites/all/themes/custom/nevris/images/home-video.jpg"> 
 
     </div> 
 
     </div> 
 
     </div> 
 
    <div class="large-6 columns"> 
 
     <img src="http://www.nevrisfurs.com/sites/all/themes/custom/nevris/images/home-collection-2014.jpg" > 
 
     </div> 
 
    </div>