用于显示的 CSS 交替行顺序：表答案

【问题标题】：CSS alternate row order for display:table用于显示的 CSS 交替行顺序：表
【发布时间】：2021-09-17 00:38:07
【问题描述】：

我有一个包含项目列表及其描述的 HTML 页面。样式仅在 CSS 中完成，旨在将信息与布局分开。

是否可以只使用 CSS 以便每隔一行反转列？我想避免使用 HTML table，或手动反转 HTML 中的列，我想继续使用 <ul> 和 <li>，因为它与显示的数据类型匹配。

我有什么：

img {
    max-width: 50px;
    height: auto;
}
ul {
    list-style-type: none;
    border-collapse: collapse;
    display: table;
}
.item-name, .item-details {
    display: table-row;
}
.item-pic, .item-text {
    display: table-cell;
    vertical-align: top;
    padding: 10px;
}
.item-name {
    font-weight: bold;
}

<html>
<body>
    <ul>
        <li><span class="item-pic"><img src="green.gif"></span>
            <span class="item-text">
                <span class="item-name">Green</span>
                <span class="item-details">This is a green item</span>
            </span>
        </li>
        <li><span class="item-pic"><img src="red.gif"></span>
            <span class="item-text">
                <span class="item-name">Red</span>
                <span class="item-details">This is a red item</span>
            </span>
        </li>
        <li><span class="item-pic"><img src="blue.gif"></span>
            <span class="item-text">
                <span class="item-name">Blue</span>
                <span class="item-details">This is a blue item</span>
            </span>
        </li>
        <li><span class="item-pic"><img src="yellow.gif"></span>
            <span class="item-text">
                <span class="item-name">Yellow</span>
                <span class="item-details">This is a yellow item</span>
            </span>
        </li>
    </ul>
</body>
</html>

我想要什么：

【问题讨论】：

就定位而言，您可以使用 nth-child developer.mozilla.org/en-US/docs/Web/CSS/:nth-child 定位替代行，然后您可以使用 flex 来反转项目的顺序，甚至可以使用 float 我相信
为什么首先使用display: table; 而不是正确的工具，例如Flexbox 和CSS-Grid，它们也允许使用order-property 或grid-area- 声明。
我尝试使用flex 和flex-direction: column-reverse，但我不知道如何将它与display: table 结合使用。我没有考虑完全放弃display: table，因为在我的脑海中，布局是一张经典的桌子——但我并没有接受这个想法。文本侧包含多行的要求仍然存在。

标签： html css html-table

【解决方案1】：

您可以使用以下 CSS 代码。它在li 标签上使用display:flex，每隔一个(:nth-child(even)) 使用reverse 顺序，在两个文本跨度上使用display: block，以使它们跨越其父级的整个宽度，因此放置他们在彼此之下。其他详情见下文：

（容器的宽度可以随意调整，也可以100%跨越其父容器的整个宽度）

img {
  max-width: 50px;
  height: auto;
}

ul {
  list-style-type: none;
  display: block;
  width: 200px;
  padding: 0;
}

ul>li {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

ul>li:nth-child(even) {
  flex-direction: row-reverse;
}
.item-text > * {
  display: block;
}
.item-pic,
.item-text {
  padding: 10px;
}
.item-name {
  font-weight: bold;
}

<html>

<body>
  <ul>
    <li>
      <span class="item-pic"><img src="green.gif"></span>
      <span class="item-text">
         <span class="item-name">Green</span>
         <span class="item-details">This is a green item</span>
      </span>
    </li>
    <li><span class="item-pic"><img src="red.gif"></span>
      <span class="item-text">
                <span class="item-name">Red</span>
      <span class="item-details">This is a red item</span>
      </span>
    </li>
    <li><span class="item-pic"><img src="blue.gif"></span>
      <span class="item-text">
                <span class="item-name">Blue</span>
      <span class="item-details">This is a blue item</span>
      </span>
    </li>
    <li><span class="item-pic"><img src="yellow.gif"></span>
      <span class="item-text">
                <span class="item-name">Yellow</span>
      <span class="item-details">This is a yellow item</span>
      </span>
    </li>
  </ul>
</body>

</html>

【讨论】：

投票赞成这个答案而不是之前的答案，因为它包含对解决方案的更好解释。同样在 flexbox 上使用 reverse 属性是一个更简单的解决方案，然后重新排序恕我直言。
谢谢！我能够成功地将其应用到实际项目中。我是否建议使用align-items: flex-start 而不是center，因为它与原始vertical-align: top 更一致？
@SirAthos flex-start 在主轴和侧轴的交叉处。默认情况下 (flex-direction: row) 它位于左上角。以flex-direction: column-reverse 为例，它将是左下角。
@SirAthos 哦，是的，我在删除旧规则时忘记了这一点。我只是在我的示例中使用了它，因为有了这么少的内容，IMO 看起来更好，但你当然是对的。（我现在改了）
@tacoshy 感谢您提供有用的说明！那么row-reverse 加上flex-start 应该与右上角对齐吗？

【解决方案2】：

您可以结合使用 nth-child 和 flex。使用 nth-child，您可以使用 odd 或 even 关键字轻松定位交替行。然后只需将li 设置为 flex 并更改偶数行的顺序。（编辑：将其更新为使用行反转，因为它确实更容易）

我删除了所有相关的样式

img {
  max-width: 50px;
  height: auto;
}

ul {
  list-style-type: none;
  border-collapse: collapse;
}


.item-pic,
.item-text {
  padding: 10px;
}

.item-name {
  font-weight: bold;
  display: block; // no need for this if you use a div
}

li {
  display: flex;
}

li:nth-child( even ) {
  flex-direction: row-reverse;
}

<html>

<body>
  <ul>
    <li><span class="item-pic"><img src="green.gif"></span>
      <span class="item-text">
                <span class="item-name">Green</span>
      <span class="item-details">This is a green item</span>
      </span>
    </li>
    <li><span class="item-pic"><img src="red.gif"></span>
      <span class="item-text">
                <span class="item-name">Red</span>
      <span class="item-details">This is a red item</span>
      </span>
    </li>
    <li><span class="item-pic"><img src="blue.gif"></span>
      <span class="item-text">
                <span class="item-name">Blue</span>
      <span class="item-details">This is a blue item</span>
      </span>
    </li>
    <li><span class="item-pic"><img src="yellow.gif"></span>
      <span class="item-text">
                <span class="item-name">Yellow</span>
      <span class="item-details">This is a yellow item</span>
      </span>
    </li>
  </ul>
</body>

</html>

【讨论】：

感谢您的回答！我发现order 的用法实际上很有趣，它说明如果您有两个以上的列，您可以按任何顺序更改列，而不仅仅是颠倒它们。最终，我选择了另一个答案作为解决方案，因为它解释得更详细，并试图保留问题中使用的格式（从而使其更容易应用于项目）。
感谢提醒