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。如上所述，我应该如何将divs浮动到正确的顺序？

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

Answer 1

你不需要漂浮。禁用所有浮动使用!important覆盖内联样式，然后使用:nth-of-type()选择绿色div并将其绝对定位，右上角等于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>

Answer 2

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

＆＃13;

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

＆＃13;

Answer 3

嗯，这更像是一个谜题，而不是一个合法的问题，但现在就是这样。

除了将null赋值给clear属性之外，正确使用边距和位置可以完成您的场景。

 <div style="height: 100px; Width: 200px;">
<!-- Container -->
<div style="float:left; height: 50px; Width:100px; background-color:red;"></div>
<div style="float: right; height: 50px; margin-top: 50px;Width:100px; background-color:blue;position: absolute;"></div>
<div style="clear: none;"></div>
<div style=" height: 50px; margin-left: 100px;margin-bottom: 50px;Width:100px; background-color:green;"></div>
</div>
</div>

Answer 4

保持相同的HTML结构，您可以使用div在CSS中选择:nth-child(N)。在这种情况下，您只需要更新蓝色（2）和绿色（4）框以及具有clear:both样式（3）的框：

div > div:nth-child(2) {
    margin-top: 50px;
}
div > div:nth-child(3) {
    display: none;
}
div > div:nth-child(4) {
    margin-top: -100px;
}

<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="clear:both;"></div>
  <div style="float:right; height: 50px; Width:100px; background-color:green;">
  </div>
</div>

请注意，这适用于此特定示例。如果容器div具有ID并使用而不是div >，那将是理想的。

对于可以独立于框高度工作的更通用的解决方案，您可以使用transform:translate()，如下所示：

div > div:nth-child(2) {
    transform:translate(0%, 100%);
}
div > div:nth-child(3) {
    display:none;
}
div > div:nth-child(4) {
    transform:translate(0%, -100%);
}

正如您在此JSFiddle上看到的那样：http://jsfiddle.net/eekhjv3n/1/

向左和向右浮动两个div

4 个答案: