创建一个图像，使用基础框架填充两行

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>