三栏宽页面中的两栏宽图像

Question

我在我的站点中使用 Foundation 4。我试图弄清楚如何使用 Foundation 网格使图像跨越 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

如果其他人对此感到疑惑，我终于找到了有用的东西。我只是将图像放在第二列末尾的正常 divs 中。通过在超过 768px 的屏幕尺寸中使图像包装器 200% 宽（并且图像本身 100% 以使其填充包装器），它在所有设备上看起来都不错。确保上传分辨率足够高的图片，在本例中为 800 像素宽。此外，包装器 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>

Answer 2

您可以像在 Bootstrap 中一样。虽然你的想法没问题 - 你最好还是这样做，因为根据 Foundation 的构建方式进行编码是最佳实践。

这是我的意思的线框示例：您必须在包含结构的行的旁边。我猜父行。

<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>

三栏宽页面中的两栏宽图像

Two column wide image in three column wide page

css

zurb-foundation