Question

看一下这个例子笔：

是否可以让div 4和Five在div 2旁边向上移动而不更改HTML或使用绝对定位？

（我不能使用contains，因为每个div将根据屏幕大小在不同方向浮动。）

.wrap {
  background-color: #666;
  max-width: 500px;
  height: 200px;
  margin: 0 auto;
}

.one {
  background-color: #ddd;
  height: 110px;
  width: 25%;
  float: left;
}

.two {
  background-color: #ccc;
  height: 55px;
  width: 50%;
  float: left;
}

.three {
  background-color: #bbb;
  height: 35px;
  width: 50%;
  float: left;
}

.four {
  background-color: #aaa;
  height: 20px;
  width: 25%;
  float: right;
}

.five {
  background-color: #999;
  height: 20px;
  width: 25%;
  float: right;
}

<div class="wrap">
  <div class="one">
    One
  </div>
  <div class="two">
    Two
  </div>
  <div class="three">
    Three
  </div>
  <div class="four">
    Four
  </div>
  <div class="five">
    Five
  </div>
</div>

Answer 1

这对你有用吗？ http://codepen.io/anon/pen/bAzch

刚刚将div 4和5更改为display:inline-block;而不是float:right;

Answer 2

当然，只需在div和div两周放置一个容器div，然后将float和width属性移到它上面。

HTML：

<div class="wrap">
  <div class="one">
    One
  </div>
  <div class="rowtwo">
  <div class="two">
    Two
  </div>
  <div class="three">
    Three
  </div>
  </div>
  <div class="four">
    Four
  </div>
  <div class="five">
    Five
  </div>
</div>

CSS：

.rowtwo {
  float: left;
  width: 50%;
}
}
.two {
  background-color: #ccc;
  height: 55px;

}

.three {
  background-color: #bbb;
  height: 35px;

}

您可以在http://codepen.io/anon/pen/KABoC

看到它

Answer 3

Ben，div 4和5永远不会从包装器的前0开始，因为div 3从div 2的末尾开始。所以4和5将div 3的右上角识别为起始点。你必须使用position：absolute; ..据我所知，别无选择。

一个简单的CSS浮动示例

3 个答案: