在桌面上创建1行6个图像，在移动设备上创建2行3个图像？

Question

我有6张方形图像，尺寸相同。我正在尝试使用Foundation来布局它们，以便在桌面上，它们在一行但在移动设备上它们是2行3，但我无法弄明白。这就是我尝试过的：

<div class="row">
    <div class="large-12 columns">
        <div class="large-2 columns"><img src="{{ 'image1.jpg' | theme_image_url }}" /></div>
        <div class="large-2 columns"><img src="{{ 'image2.jpg' | theme_image_url }}" /></div>
        <div class="large-2 columns"><img src="{{ 'image3.jpg' | theme_image_url }}" /></div>
        <div class="large-2 columns"><img src="{{ 'image4.jpg' | theme_image_url }}" /></div>
        <div class="large-2 columns"><img src="{{ 'image5.jpg' | theme_image_url }}" /></div>
        <div class="large-2 columns"><img src="{{ 'image6.jpg' | theme_image_url }}" /></div>
    </div>
</div>

这在桌面上可以正常工作（尽管存在一些中心问题），但在移动设备上，每个图像都有自己的行。

这就是我想要的：

桌面：

移动：

关于如何实现这一目标的任何想法？

Answer 1

你可以这样做（注意“小”类）：

<div class="row">

        <div class="large-2 small-4 columns"><img src="{{ 'image1.jpg' | theme_image_url }}" /></div>
        <div class="large-2 small-4 columns"><img src="{{ 'image2.jpg' | theme_image_url }}" /></div>
        <div class="large-2 small-4 columns"><img src="{{ 'image3.jpg' | theme_image_url }}" /></div>
        <div class="large-2 small-4 columns"><img src="{{ 'image4.jpg' | theme_image_url }}" /></div>
        <div class="large-2 small-4 columns"><img src="{{ 'image5.jpg' | theme_image_url }}" /></div>
        <div class="large-2 small-4 columns"><img src="{{ 'image6.jpg' | theme_image_url }}" /></div>

</div>

Answer 2

您不需要为每个div定义大小类。您可以使用Foundation的block grid代替。只需在父元素中定义大小类。这是实现这些类型布局的基础方式。

<ul class="small-block-grid-3 large-block-grid-6">
  <li><!-- Your content goes here --></li>
  <li><!-- Your content goes here --></li>
  <li><!-- Your content goes here --></li>
  <li><!-- Your content goes here --></li>
  <li><!-- Your content goes here --></li>
  <li><!-- Your content goes here --></li>
</ul>