html - CSS让浮动填充未使用的空间

Question

嗨，我有一点 css 浮动问题。

我有 3 个浮动 div。如下图所示

<div style="width : 200px;">
   <div style="float : left; width : 90px; height : 50px; ">div 1</div>
   <div style="float : left; width : 90px; height : 90px; ">div 2</div>
   <div style="float : left; width : 90px; height : 50px; ">div 3</div>
</div>

我想要的是 3 号 div 漂浮在 1 号下面的空白处。

用css可以吗？

Answer 1

将您的 div 2 浮动到右侧而不是左侧。

并正确编写您的 CSS，而不是 div 中的样式

http://jsfiddle.net/feqJT/1

.b{float : right; width : 90px; height : 90px;}

然后，您可以通过更改持有 div 的大小来摆脱空间，或者添加 padding-right:20px; 或边距右：20px；取决于你想要什么。不同帖子的填充和边距之间的差异。

.b{float : right; width : 90px; height : 90px; margin-right:20px;}

Answer 2

使用下面的片段

<div style="width : 200px;">
   <div style="float : left; width : 90px; height : 50px; background-color: blue; ">div 1</div>
   <div style="float : left; width : 90px; height : 90px;background-color: red; ">div 2</div>
   <div style="float : left; width : 90px; height : 50px;background-color: green; margin-top:-40px; ">div 3</div>
</div>

下面的代码也会做同样的事情。

<div style="width : 200px;">
   <div style="float : left; width : 50px; height : 50px; background-color: blue; ">div 1</div>
   <div style="float : left; width : 90px; height : 90px;background-color: red;float:right; margin-right:60px;">div 2</div>
   <div style="float : left; width : 50px; height : 50px;background-color:green; ">div 3</div>
</div>

添加背景颜色以查看 div。

Answer 3

我认为你最好的选择是包装div 1，然后浮动到左边div 3。<div>像下面的代码：

<div style="width : 200px;">
   <div style="float: left;">
      <div style="width: 90px; height: 50px;">div 1</div>
      <div style="width: 90px; height: 50px;">div 3</div>
   </div>
   <div style="float: left; width: 90px; height: 90px;">div 2</div>
</div>

jsFiddle 示例