如何使用第 nth-child 使每一秒 post 从第一个反转

Question

我在http://www.webdesignerdepot.com/上看到，偶数帖子的图片在右边，奇数帖子的图片在左边。毫无疑问，css.

解决了这个问题

我尝试用 css 解决这个问题，但没有成功。

这是我的代码：

<div class="row">
  
  <div class="col=xs-12 post">
    <div class="row">
      <div class="col-xs-12 col-md-6" image>
      <div class="col-xs-12 col-md-6" text>
    </div>
  </div>
      
      
  <div class="col=xs-12 post">
    <div class="row">
      <div class="col-xs-12 col-md-6" image>
      <div class="col-xs-12 col-md-6" text>
    </div>
  </div>
      
      
  <div class="col=xs-12 post">
    <div class="row">
      <div class="col-xs-12 col-md-6" image>
      <div class="col-xs-12 col-md-6" text>
    </div>
  </div>
      
      
   <div class="col=xs-12 post">
    <div class="row">
      <div class="col-xs-12 col-md-6" image>
      <div class="col-xs-12 col-md-6" text>
    </div>
  </div>
      
      
  <div class="col=xs-12 post">
    <div class="row">
      <div class="col-xs-12 col-md-6" image>
      <div class="col-xs-12 col-md-6" text>
    </div>
  </div>
      
      
  <div class="col=xs-12 post">
    <div class="row">
      <div class="col-xs-12 col-md-6" image>
      <div class="col-xs-12 col-md-6" text>
    </div>
  </div>
    
      
</div>

我想做类似webdesignerdepot.com的东西就像我制作的这张图片：

感谢任何想法！

Answer 1

我看到您正在使用 Bootstrap。也许值得你使用他们内置的 .col-md-push-* 和 .col-md-pull-* 修饰符类来交换它们。

来自 Bootstrap 文档：

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

这将导致两列的顺序颠倒（.col-md-9 将呈现为 .col-md-3 之后）。

Answer 2

我会同意@krypsin 的回答，因为你似乎在使用 bootstrap。但如果你不是，你可以使用 css 来做类似的事情：

.post:nth-of-type(even) .row .col-xs-12.col-md-6:first-of-type{
  float: right;
}
.post:nth-of-type(even) .row .col-xs-12.col-md-6:last-of-type{
  float: left;
}

:nth-of-type(even) 将样式应用于每一秒的子项。post class。 :last-of-type 选择器选择该元素类型的最后一个实例，:first-of-type 选择器将样式应用于第一个实例。

Answer 3

没有 float 但 display，direction 会为您完成这项工作。

display:flex;

.row .row {
  display:flex;
  width:400px;
  height:200px;
  border:red solid;
  }
.row div  .row >div {
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
  background:turquoise;
  border:solid red;
  direction:ltr;
  }
.row .row div:nth-child(even) {
  background:tomato;
  }
.row :nth-child(even) .row{
  direction:rtl;
  }

<div class="row">
  
  <div class="col=xs-12 post">
    <div class="row">
      <div class="col-xs-12 col-md-6"> image</div>
      <div class="col-xs-12 col-md-6"> text</div>
    </div>
  </div>
      
      
  <div class="col=xs-12 post">
    <div class="row">
      <div class="col-xs-12 col-md-6"> image</div>
      <div class="col-xs-12 col-md-6"> text</div>
    </div>
  </div>
      
      
  <div class="col=xs-12 post">
    <div class="row">
      <div class="col-xs-12 col-md-6"> image</div>
      <div class="col-xs-12 col-md-6"> text</div>
    </div>
  </div>

或display:table

.row .row {
  display:table;
  table-layout:fixed;
  width:400px;
  height:200px;
  border:red solid;
  }
.row div  .row >div {
  display:table-cell;
  text-align:center;
  vertical-align:middle;
  background:turquoise;
  border:solid red;
  direction:ltr;
  }
.row .row div:nth-child(even) {
  background:tomato;
  }
.row :nth-child(even) .row{
  direction:rtl;
  }

<div class="row">
  
  <div class="col=xs-12 post">
    <div class="row">
      <div class="col-xs-12 col-md-6"> image</div>
      <div class="col-xs-12 col-md-6"> text</div>
    </div>
  </div>
      
      
  <div class="col=xs-12 post">
    <div class="row">
      <div class="col-xs-12 col-md-6"> image</div>
      <div class="col-xs-12 col-md-6"> text</div>
    </div>
  </div>
      
      
  <div class="col=xs-12 post">
    <div class="row">
      <div class="col-xs-12 col-md-6"> image</div>
      <div class="col-xs-12 col-md-6"> text</div>
    </div>
  </div>
      
    
</div>

或display:flex和order

.row .row {
  display: flex;
  width: 400px;
  height: 200px;
  border: red solid;
}
.row div .row >div {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: turquoise;
  border: solid red;
}
.row .row div:nth-child(even) {
  background: tomato;
}
.row :nth-child(even) .row div:nth-child(even) {
  order: -1
}

<div class="row">

  <div class="col=xs-12 post">
    <div class="row">
      <div class="col-xs-12 col-md-6">image</div>
      <div class="col-xs-12 col-md-6">text</div>
    </div>
  </div>


  <div class="col=xs-12 post">
    <div class="row">
      <div class="col-xs-12 col-md-6">image</div>
      <div class="col-xs-12 col-md-6">text</div>
    </div>
  </div>


  <div class="col=xs-12 post">
    <div class="row">
      <div class="col-xs-12 col-md-6">image</div>
      <div class="col-xs-12 col-md-6">text</div>
    </div>
  </div>



</div>

Answer 4

正如其他人提到的，您可以利用 CSS' float 属性以及 nth-child(odd) 和 nth-child(even) 选择器。

检查此 jsfiddle 我使用以下内容的地方 CSS:

.post:nth-child(odd) .row div:nth-child(odd),
.post:nth-child(even) .row div:nth-child(even) {
  float: left;
  height: 260px;
  overflow: hidden;
  width: 50%;
}

.post:nth-child(odd) .row div:nth-child(even),
.post:nth-child(even) .row div:nth-child(odd) {
  float: right;
  height: 260px;
  overflow: hidden;
  width: 50%;
}

div {
  box-shadow: inset 0px 0px 1px #000;
}

如何使用第 nth-child 使每一秒 post 从第一个反转

How to make every second post reversed from first with nth-child

html

css

pseudo-element