css - 一个简单的 CSS 浮动示例

Question

看看这个示例笔：

http://codepen.io/benpearson/pen/bHJke

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

（我不能使用包含，因为每个 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

只是将 divs 4 和 5display:inline-block;改为float:right;

Answer 2

当然，只需在 div 2 和 3 周围放置一个容器 div，然后将它们的floatandwidth属性移到它上面。

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 永远不会从 wrapper 的顶部 0 开始，因为 div 3 从 div 2 的末尾开始。所以 4 和 5 将 div 3 的右上角视为起点。您必须使用 position: absolute; ..据我所知，没有其他选择。