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

您可以像在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>

Answer 2

最后，如果其他人对此感到疑惑，他们会发现有用的方法。我只是将图像放在第二列末尾的普通div中。通过使图像包装器在768px以上的屏幕尺寸上达到200％的宽度（图像本身为100％以使其充满包装器），在所有设备中看起来都不错。确保上传具有足够分辨率的图像，以使其看起来不错，在这种情况下，图像的宽度为800px。同样，包装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>

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

2 个答案: