浮动两个左边和右边一个div [英] Float two divs left and one right

问题描述

我的代码结构看起来像这样

$ b

元素的位置应该如下所示：

 ┌──────┬─── ───┐
│red│green│
├─────────────┘
│蓝│
└────── ┘$ b​​ $ b  

我无法更改或添加任何其他代码，唯一的方法就是使用CSS。
我应该如何浮动div以正确的顺序，如上所述？

编辑：我的代码没有，也不能包含div清除。

解决方案

您可以在蓝色框上使用clear：left将其向下推，然后在绿色框上使用负边距推动它。

 < div style =height：100px; Width：200px;> <！ - 容器 - > < div style =float：left; height：50px; width：100px; background-color：red;> < / DIV> < div style =float：left; clear：left; height：50px; Width：100px; background-color：blue;> < / DIV> < div style =float：left; height：50px; width：100px; background-color：green; margin-top：-50px;> < / div>< / div>  

My code structure looks like this

<div style="height: 100px;
            Width: 200px;"> <!-- Container -->
  <div style="float: left;
              height: 50px;
              Width: 100px;
              background-color: red;">
  </div>
  <div style="float: left;
              height: 50px;
              Width: 100px;
              background-color: blue;">
  </div>
  <div style="float: right;
              height: 50px;
              Width: 100px;
              background-color: green;">
  </div>
</div>

But the right position of elements should look like this:

┌──────┬──────┐
│ red  │green │
├──────┼──────┘
│ blue │
└──────┘

I cannot change or add any additional code, the only way is with CSS. How should I float the divs to be in the right order as I mentioned above?

Edit: My code doesn't and can't contain div with clear.

解决方案

You can use clear: left on the blue box to push it down and then use negative margin on the green box to push it up.

<div style="height: 100px; Width: 200px;">
  <!-- Container -->

  <div style="float:left;height: 50px; 
                    width:100px; background-color:red;">
  </div>
  <div style="float:left;clear:left;
                    height: 50px; Width:100px; background-color:blue;">
  </div>
  <div style="float:left; height:50px; 
                    width:100px; background-color:green;margin-top:-50px;">
  </div>

</div>

这篇关于浮动两个左边和右边一个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！