css中的蛇形对齐答案

【问题标题】：Snake-like alignment in csscss中的蛇形对齐
【发布时间】：2016-12-09 16:23:49
【问题描述】：

我一直在努力解决 CSS 中的以下问题。我有任意数量的项目（跨度或 div），我想以类似蛇的模式将它们包装在容器中。

我的意思是，如果我有 10 个项目，每个项目 20 像素宽，我希望它们在 60 像素宽的容器中显示如下：

我曾尝试在 CSS 中使用 flexbox，但我只能让项目显示如下：

如果有帮助，我知道各个项目的确切宽度，但我不知道容器的宽度。

任何帮助将不胜感激。

提前谢谢你！

【问题讨论】：

你可以使用任何html结构吗？
虽然 CSS 大师可能能够为您提供纯 CSS 解决方案，但我想先问问您是否愿意接受 javascript 或 jQuery 解决方案？您可以将三个元素的每个块组合成一行，并使用 CSS 中的 odd 和 even 将行的子元素浮动到相对的两侧。
请发布您打算使用的 HTML。
我考虑的替代方案是拥有一个 HTML 网格（每行/列对拥有一个唯一的 ID）并使用 javascript 将项目动态分配到正确的位置，但这不如 CSS 优雅解决方案（如果存在）...不过我可能不得不求助于它。
老实说，在这种情况下，我认为 JS 解决方案不会比 CSS 解决方案（如果有的话）“不那么优雅”......

标签： css

【解决方案1】：

如果您使用 parent - rows - items 创建 HTML 结构，则可以在 .row:nth-child(2n) 元素上使用 flex-direction: row-reverse，这将创建所需的结果。

.content {
  display: flex;
  flex-direction: column;
}
.row {
  display: flex;
  justify-content: space-between;
}
.row:nth-child(2n) {
  flex-direction: row-reverse;
}
.row:nth-child(2n):last-child .item {
  margin-right: auto;
}

<div class="content">
  <div class="row">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
  <div class="row">
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>
  <div class="row">
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
  </div>
  <div class="row">
    <div class="item">10</div>
  </div>
</div>

【讨论】：

这很好，比我的解决方案更好:)
比我的也好...+1
如果我知道每行有多少个项目，以及会有多少行，这将是一个完美的解决方案......但我想这是我只能在 JS 中弄清楚的东西，所以我将接受答案。非常感谢您的快速回复！
每行的项目是可变的 - 它取决于容器宽度......所以，我猜在这种情况下 JS 是强制性的。附： OP 提到了不同的 HTML 结构，在 HTML 中没有严格定义的行......有定义的行 - 它更容易。
@Andreq 不确定这是否对您有帮助，但如果您正在生成项目，您可以使用 js 在某些特定数量的项目上将项目包装成行jsfiddle.net/Lg0wyt9u/1344

【解决方案2】：

在不了解您的标记限制的情况下，您可以使用以下结构和 float 值使其工作。

.ltr, .rtl {
  width: 60px;
}
.ltr div, .rtl div {
  width: 20px;
  height: 20px;
  display: inline-block;
}
.rtl div {
  float: right;
}
.ltr div {
  float: left;
}

<div class="ltr">
  <div>0</div><div>1</div><div>2</div>
</div>
<div class="rtl">
  <div>3</div><div>4</div><div>5</div>
</div>
<div class="ltr">
  <div>6</div><div>7</div><div>8</div>
</div>

【讨论】：

【解决方案3】：

使用 css direction: rtl;

在这里演示：http://codepen.io/sol_b/pen/YpjGKK

<div class="container">
  <div class="row">
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </div>
  <div class="row2">
    <span>4</span>
    <span>5</span>
    <span>6</span>
  </div>
  <div class="row">
    <span>7</span>
    <span>8</span>
    <span>9</span>
  </div>

</div>

.row2 {
  direction: rtl;
  float:left;
}

.row {
  clear:both;
}

【讨论】：