Question

我试图在左侧浮动2个div，在右侧浮动2个div。我需要在一个父div中拥有所有div。

我的CSS：

.news { 
  width:50%; 
  float:right !important; 
}
.news:first-child {
    float:left;
}
.news:nth-child(2) {
    float:left;
}

我的HTML：

<div class="maindiv">
  <div class="news">
    <img src="fileadmin/user_upload11150532_956775297674176_4405300320161350202_n.jpg">
    <h2>aaaaaa4</h2>
  </div>
  <div class="news">
    <img src="fileadmin/user_upload11150532_956775297674176_4405300320161350202_n.jpg">
    <h2>aaaaaa4</h2>
  </div>
  <div class="news">
    <img src="fileadmin/user_upload/11150532_956775297674176_4405300320161350202_n.jpg">
    <h2>aaaaaa4</h2>
  </div>
</div>

How it looks now

How it should look like

Answer 1

为什么不采取其他元素，如

＆＃13;

.row{clear:both;}
.image {float:left;width:50%;}
.image-details {float:right;width:50%;}
.image img {display:block;height:auto;width:100%;}

＆＃13;

<div class="parent">
  <div class="row clearfix">
    <div class="image"><img src="http://placehold.it/350x150"></div>
    <div class="image-details">some details <br>some details <br>some details <br></div>
  </div>
  <div class="row clearfix">
    <div class="image"><img src="http://placehold.it/350x150"></div>
    <div class="image-details">some details <br>some details <br>some details <br>some details <br></div>
  </div>
</div>

＆＃13;

Answer 2

尝试将它们左右分开：

.news:nth-child(odd) {
    float:left;
}
.news:nth-child(even) {
    float:right;
}

2个div到左边，其他div到右边

2 个答案: