Question

我正在尝试为某些内容块设计交错布局，其中每个块的宽度完全相同但可能具有不同的高度。但是，每个项目都是顺序的，因此它们需要从左到右或多或少清晰易读（即：第1列包含第1项和第4项，第2列包含第2项和第5项，第3列包含第3项）

这是我的想法：http://oi59.tinypic.com/24b66hw.jpg

这是我的第一个想法：

<?php
    $arr = array();
    $arr[] = array('title' => 'Day 1', 'img' => '/image1.png', 'text' => 'Text for item 1');
    $arr[] = array('title' => 'Day 2', 'img' => '/image2.png', 'text' => 'Text for item 2');
    $arr[] = array('title' => 'Day 3', 'img' => '/image3.png', 'text' => 'Text for item 3');
    $arr[] = array('title' => 'Day 4', 'img' => '/image4.png', 'text' => 'Text for item 4');
    $arr[] = array('title' => 'Day 5', 'img' => '/image5.png', 'text' => 'Text for item 5');

    $cols = array();
    $cols[0] = array();
    $cols[1] = array();
    $cols[2] = array();

    for($x = 0; $x <= count($arr); $x+=3) {
        $cols[0][] = $arr[$x];

        if (isset($arr[$x+1])) {
            $cols[1][] = $arr[$x+1];
        }

        if (isset($arr[$x+2])) {
            $cols[2][] = $arr[$x+2];
        }
    }

    foreach($cols as $key => $col) {
        echo '<div class="col'.$key.'">';
        foreach($col as $item) {
            echo '<div class="row-item">';
            echo 'Title: '.$item['title'].'<br />';
            echo 'Image: '.$item['img'].'<br />';
            echo 'Text: '.$item['text'];
            echo '</div>';
        }
        echo '</div>';
    }
?>

哪会产生这个：

<div class="col0">
    <div class="row-item">
        Title: Day 1<br>
        Image: /image1.png<br>
        Text: Text for item 1
    </div>


    <div class="row-item">
        Title: Day 4<br>
        Image: /image4.png<br>
        Text: Text for item 4
    </div>
</div>


<div class="col1">
    <div class="row-item">
        Title: Day 2<br>
        Image: /image2.png<br>
        Text: Text for item 2
    </div>


    <div class="row-item">
        Title: Day 5<br>
        Image: /image5.png<br>
        Text: Text for item 5
    </div>
</div>


<div class="col2">
    <div class="row-item">
        Title: Day 3<br>
        Image: /image3.png<br>
        Text: Text for item 3
    </div>
</div>

不幸的是，当我被告知布局必须响应时，我遇到了一个问题，当在较小的屏幕上显示时，只有一行而不是三行，如下所示：http://oi62.tinypic.com/2hfudj6.jpg

除了使用JavaScript在小屏幕上重新组织块，或者只在小屏幕上显示块的单独输出之外，我似乎无法想到解决这个特定问题。

Answer 1

啊，我会指向HTML5 CSS3 columns的方向。 Chris Coyier做a nice writeup here和CodePen here。

这是一个简单的CSS修复。您可以在@media查询中更改它们。如果我没有弄错的话，Pinterest会使用它，加上不支持浏览器的Javascript后备。

现在这意味着您的内容将从源头顺序（从源顺序）从上到下然后从左到右流动，因此：

......就像报纸专栏一样。

Answer 2

PHP可能是不必要的，因为单独的CSS伪类应该做一个更清洁（并且不那么详尽）的工作。

第一个示例允许您定位div元素.col的每个奇数甚至发生的实例：

 .col:nth-child(odd) {
            /* Your Styles */
  }

 .col:nth-child(even) {
            /* Your Styles */
  }

或者对于更具体的控制，这将允许您按照外观的顺序来定位元素：

 .col:nth-child(1) {
            /* Your Styles */
  }

 .col:nth-child(2) {
            /* Your Styles */
  }

 .col:nth-child(3) {
            /* Your Styles */
  }

现在，当然，这将有助于您为桌面环境设置列。移动或其他视口怎么样？媒体查询。

  @media screen and (max-width: 1024px) {
        .col:nth-child(1) {
              /* Your Styles */
          }
   }

这将允许您在较小的视口上定义各列的行为。根据需要复制媒体查询，以准确精确地确定它们在所有屏幕尺寸中的确切行为。

在没有Javascript的情况下创建响应交错的行设计

2 个答案: