html - 左右浮动两个div

Question

我的代码结构是这样的

<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>

但是元素的正确位置应该是这样的:

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

我不能更改或添加任何额外的代码，唯一的方法是使用 CSS。 我应该如何按照我上面提到的正确顺序 float div？

编辑:我的代码没有也不能包含带有 clear 的 div。

Answer 1

你不需要 float 。使用 !important 禁用所有 float 以覆盖内联样式，然后使用 :nth-of-type() 选择绿色 div 并使用 right 和 top 绝对定位等于 0;

div {
  position: relative;
}
div > div{
  float: none !important;
}
div > div:nth-of-type(3) {
  position: absolute;
  right: 0;
  top:0;
}

<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>