三栏宽页中的两列宽图像

Question

我在我的网站上使用基金会4。我试图弄清楚如何使用基金会网格在3列宽的页面中使图像跨越2列。这就是我想要的样子：

​

​

是否有可能为此使用嵌套行？以下是到目前为止我的html (不起作用)：

<div class="row">
    <div class="large-4 columns">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. 
    </div>

    <div class="large-4 columns">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. 
    </div>

    <div class="large-4 columns">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. 
        <div class="row">
            <div class="large-8 columns pull-8">
                <div><img class="bild" src="myimage.jpg"></div>
            </div>
        </div>
    </div>
</div>

Answer 1

你可以就像你在鞋带里一样。虽然您的想法是可以的-您最好这样做，因为这是最好的做法，以代码与如何构建的基金会是被使用。

这里是一个线框的例子，我的意思是:你必须下一个行与你的结构在里面。我猜是母行。

<div class="row">
    <div class="large-4"></div>
    <div class="large-8">
        <div class="row">
            <div class="large-6"></div>
            <div class="large-6"></div>
        </div>
        <div class="row">
        <div class="large-12"></div>
    </div>
</div>

Answer 2

如果其他人对此有疑问的话，终于找到了有用的东西。我只是简单地将图像放在第二列末尾的普通div中。通过使屏幕尺寸超过768 to的图像包装器宽200% (图像本身100%用来填充包装器)，它在所有设备上看起来都很好。一定要上传一个分辨率足够好的图像，在这种情况下，它是800 it宽。此外，包装器div和图像都应该是大屏幕大小的float:left，这样才能工作。

如果有人有更好的解决办法，请告诉我。

    <style>
  .bild img{
    width:100%;
  }

  @media only screen and (max-width: 767px){
  .bild{
    width:100%;
    margin: 20px 0px;
  }
  }
    @media only screen and (min-width: 768px){
  .bild{
    margin:20px 0px;
    float:left;
    width:200%;
  }
  }
    </style>
    <div class="row">
        <div class="large-4 columns">
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget 
           dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, 
           nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium 
            quis, sem. 
        </div>

        <div class="large-4 columns">
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget 
          dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, 
          nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium 
          quis, sem. 

          <div class="bild"><img src="myimage.jpg"></div>
        </div>

        <div class="large-4 columns">
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget 
           dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, 
           nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium 
           quis, sem. 
            </div>
        </div>
    </div>