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>

我想要的是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 sample

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

3 个答案: