CSS display:table 的备用行顺序

Question

我有一个 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>

我想要什么：

Answer 1

你可以结合使用 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>

Answer 2

您可以使用以下 CSS 代码。它在 li 标签上使用 display:flex，在每个第二个标签上使用 reverse 顺序 (:nth-child(even)) ，在两个文本范围上使用 display: block 来使它们运行在它们 parent 的整个宽度上，因此将它们放在彼此下面。其他详情见下：

(容器的宽度可以随意调整，也可以100%占满parent)

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>

CSS display:table 的备用行顺序

CSS alternate row order for display:table

html

css

html-table