CSS - 如何更改 div 顺序 [重复]答案

【问题标题】：CSS - How to change divs order [duplicate]CSS - 如何更改 div 顺序 [重复]
【发布时间】：2017-06-16 22:36:50
【问题描述】：

我有一个显示图像和文本的 div，我使用 foreach 加载内容，我需要在 foreach 的第二行反转 div 的顺序。

第一个 div 显示：

Image - Text

第二个 div 显示：

Text - Image

例如：

.content
{
  width:100%;
  height: 200px;
}

.content .image, .content .text
{
  width:50%;
  float:left;
}

.content .image img
{
  width:100%;
}

<div class="content">
  <div class="image">
    <img src="https://www.w3schools.com/css/trolltunga.jpg" />
  </div>
  <div class="text">
    <span>text1</span>
  </div>
</div>

<div class="content">
  <div class="image">
    <img src="https://www.w3schools.com/css/trolltunga.jpg" />
  </div>
  <div class="text">
    <span>text2</span>
  </div>
</div>

谢谢

【问题讨论】：

你可以使用 float: left / right ???
但我怎么能在第二行做到这一点，浮动是正确的？ @费尔南多
你的意思是这样吗？ stackoverflow.com/questions/32829567/…

标签： html css

【解决方案1】：

您至少可以使用 2 个选项来做到这一点

1.使用 flexbox 见下文

.content {
  width: 100%;
  height: 200px;
  display: flex;
}

.content .image,
.content .text {
  width: 50%;
  float: left;
}

.content .image img {
  width: 100%;
}

.content:nth-child(even) {
  flex-direction: row-reverse
}

<div class="content">
  <div class="image">
    <img src="https://www.w3schools.com/css/trolltunga.jpg" />
  </div>
  <div class="text">
    <span>text1</span>
  </div>
</div>

<div class="content">
  <div class="image">
    <img src="https://www.w3schools.com/css/trolltunga.jpg" />
  </div>
  <div class="text">
    <span>text2</span>
  </div>
</div>

2。使用 float:right 见下文

.content {
  width: 100%;
  height: 200px;
}

.content .image,
.content .text {
  width: 50%;
  float: left;
}

.content .image img {
  width: 100%;
}

.content:nth-child(even) .image{
  float:right;
}

<div class="content">
  <div class="image">
    <img src="https://www.w3schools.com/css/trolltunga.jpg" />
  </div>
  <div class="text">
    <span>text1</span>
  </div>
</div>

<div class="content">
  <div class="image">
    <img src="https://www.w3schools.com/css/trolltunga.jpg" />
  </div>
  <div class="text">
    <span>text2</span>
  </div>
</div>

【讨论】：