如何在 CSS 中实现这种左右交替布局？

Question

我有一个网页，其中包含成排的新闻花絮以及相关的缩略图。

<div class="news-list">
    <div class="news-item">
        <div class="news-image">
            <img class="news-image" src="penguin.jpg" />
        </div>
        <div class="news-info">
            <p class="news-info">
                Lorem ipsum dolor sit ... sapientem honestatis.
            </p>
        </div>
    </div>

    <div class="news-item">
        <div class="news-image">
            <img class="news-image" src="walrus.jpg" />
        </div>
        <div class="news-info">
            <p class="news-info">
                Mel et dolores luptatum ... dicta alienum.
            </p>
        </div>
    </div>

    <div class="news-item">
    ...
</div>

我目前通过 CSS

为页面设置了左侧所有图像和右侧描述的样式

div.news-list { display: table; }
div.news-item { display: table-row; }
div.news-image { display: table-cell; }
div.news-info { display: table-cell; }

但我想更改此布局以在左图和右图之间交替显示，如下面的模型所示：

我在确定实现此布局的 CSS 解决方案时遇到问题，该解决方案不需要我在实际标记中交替排列文本花絮和图像的顺序。（我很乐意根据需要将图片或文字放在第一位，但它应该在整个过程中保持一致 HTML。）

有什么建议吗？

Answer 1

为了支持旧版浏览器，您可以添加偶数和奇数类。

img.news-image {
  background: #dadada;
  height: 50px;
  width: 50px;
}
p.news-info {
  margin-top: 0;
}
.news-item {
  clear: both;
  border-top: 1px solid #dadada;
}
.odd div.news-info {
  float: right;
}
.odd div.news-image {
  float: left;
}
.even div.news-info {
  float: left;
}
.even div.news-image {
  float: right;
}

<div class="news-list">
  <div class="news-item odd">
    <div class="news-image">
      <img class="news-image" src="penguin.jpg" />
    </div>
    <div class="news-info">
      <p class="news-info">
        Lorem ipsum dolor sit ... sapientem honestatis.
      </p>
    </div>
  </div>

  <div class="news-item even">
    <div class="news-image">
      <img class="news-image" src="walrus.jpg" />
    </div>
    <div class="news-info">
      <p class="news-info">
        Mel et dolores luptatum ... dicta alienum.
      </p>
    </div>
  </div>
</div>

对于现代浏览器，您可以使用 css 伪类。

img.news-image {
  background: #dadada;
  height: 50px;
  width: 50px;
}
p.news-info {
  margin-top: 0;
}
.news-item {
  clear: both;
  border-top: 1px solid #dadada;
}
.news-item:nth-child(odd) div.news-info {
  float: right;
}
.news-item:nth-child(odd) div.news-image {
  float: left;
}
.news-item:nth-child(even) div.news-info {
  float: left;
}
.news-item:nth-child(even) div.news-image {
  float: right;
}

<div class="news-list">
  <div class="news-item">
    <div class="news-image">
      <img class="news-image" src="penguin.jpg" />
    </div>
    <div class="news-info">
      <p class="news-info">
        Lorem ipsum dolor sit ... sapientem honestatis.
      </p>
    </div>
  </div>

  <div class="news-item">
    <div class="news-image">
      <img class="news-image" src="walrus.jpg" />
    </div>
    <div class="news-info">
      <p class="news-info">
        Mel et dolores luptatum ... dicta alienum.
      </p>
    </div>
  </div>
</div>

如何在 CSS 中实现这种左右交替布局？

How do I achieve this alternating left-and-right layout in CSS?

html

css

css-float