Question

我正在尝试使用float: left和最少量的DOM创建以下布局。

使用下面的代码（显然）不起作用，我得到了这个结果：

代码：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
    html, body {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
    }
    .out {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
    }
    .in {
        float: left;
        box-sizing: border-box;
    }
    </style>
</head>
<body>

    <div class="out">
        <div class="in" style="width: 50%; height: 50%; background: red;"></div>
        <div class="in" style="width: 50%; height: 100%; background: green;"></div>
        <div class="in" style="width: 50%; height: 50%; background: blue;"></div>
    </div>

</body>
</html>

那么有办法吗？

重要说明！

由于其他布局的约束，我必须使用float: left
我无法使用flex

Answer 1

你需要一个容器围绕两个较小的容器，以便它们包含在一起。这是一个小提琴：http://jsfiddle.net/ce0nmase/

正如您在html中看到的，我有以下代码：

<div class="in" style="width: 50%; height: 100%; background: red;">
    <div class="in" style="width: 100%; height: 50%; background: blue;"></div>
    <div class="in" style="width: 100%; height: 50%; background: yellow;"></div>
</div>

这意味着您有两个50％的容器，其中一个是全高。然后在你的第二个容器中，你还有两个容器，它们都有50％的高度。

编辑：

或者，您可以将float:right;添加到完整高度框。

http://jsfiddle.net/ce0nmase/1/

Answer 2

/*-------------
    Global
---------------*/

#wrapper {
  width:100%;
  min-height: 200px;
  border: black solid 1px;
}

#red {
  background:red;
  width:50%;
  min-height:100px;
}

#blue {
  background:blue;
  width:50%;
  min-height:100px;
}

#green{
  background:green;
  width:50%;
  min-height: 200px;
}

.float-left{
  float:left;
}

.float-right{
  float:right;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}

.clearfix:after{
  clear:both;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="wrapper" class="clearfix">
    <div id="red" class="float-left">
      red
    </div>
    <div id="green" class="float-right">
      green
    </div>
    <div id="blue" class="float-right">
      blue
    </div>
  </div>
</body>
</html>

带浮动的HTML布局

2 个答案: