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

如果没有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 2

正如其他人所提到的，您可以使用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;
}

Answer 3

我可以看到你正在使用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 4

我会使用@ 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类的子元素。 :last-of-type选择器选择该元素类型的最后一个实例，:first-of-type选择器将样式应用于第一个实例。

如何使每一个帖子从第一个与第n个孩子相反

4 个答案: