Question

我有以下HTML结构。是否有任何CSS只能将Content 3 Div（div3）移到顶部？我不能改变html或元素序列。

我尝试使用负边距。如果我有Div 1和2的固定高度，它可以工作。 2是动态的，高度不能固定。

请帮我解决IE9及以上版本。

div.container {
  overflow:hidden;
  background: #eee
}

div.container > div {
  width: 49.5%;
  float: right;
  background: #ccc;
  margin-top:5px;
  clear:right;
  padding: 10px;
  box-sizing: border-box;
}

div.container > .div3 {
  float:left;
  clear: none;
  clear:left;
}

<div class="container">
  <div class="div1"> Dynamic <br>Content 1</div>
  <div class="div2">Content <br> 2</div>
  <div class="div3">Content 3</div>
  <div class="div4">Content 4</div>
  <div class="div4">Content 5</div>
</div>

Answer 1

更新：根据您的评论，我认为这应该可以解决问题。您可以在div3上使用position:absolute;，在容器div上使用position:relative。

div.container {
  overflow:hidden;
  background: #eee;
  position:relative;
}

div.container > div {
  width: 49.5%;
  float: right;
  background: #ccc;
  margin-top:5px;
  clear:right;
  padding: 10px;
  box-sizing: border-box;
}

div.container > .div3 {
  float:left;
  position:absolute;
}

<div class="container">
  <div class="div1"> Dynamic <br>Content 1</div>
  <div class="div2">Content <br> 2</div>
  <div class="div3">Content 3</div>
  <div class="div4">Content 4</div>
  <div class="div4">Content 5</div>
</div>

将左浮动元素移到顶部，而所有先前的兄弟姐妹都向右浮动

1 个答案: