将div放在浮动div下

Question

今天一个简单的问题但似乎无法找到解决方案。我有四个div - 我希望#down可以直接放在#up下面，但是对于我的生活无法理解它。这是我的CSS和HTML。

#up {
  width: 33.3%;
  height: 100px;
  background: #CCCCCC;
  float: left;
}
#down {
  width: 33.3%;
  height: 100px;
  background: #999999;
  float: left;
}
#mid {
  width: 33.3%;
  height: 200px;
  background: #999999;
  float: left;
}
#right {
  width: 33.3%;
  height: 200px;
  background: #CCCCCC;
  float: left;
}

<div id="up"></div>
<div id="mid"></div>
<div id="right"></div>
<div id="down"></div>

元素必须保持向左浮动。

Answer 1

也许可以尝试使用额外的div来同时上下移动？

<div id="up_down">
<div id="up"></div>
<div id="down"></div></div>
<div id="mid"></div>
<div id="right"></div>

你将把你的css改为：

up_down{
width: 33.3%;
height: 200px;
}

#up {
width: 100%;
height: 50%;
background: #CCCCCC;
float: left;
}
#down {
width: 100%;
height: 50%;
background: #999999;
float: left;
}

Answer 2

您可以考虑简单地将中间div的display属性设置为“inline-block”，而不是使用浮点数。请记住，默认情况下，div元素具有块显示，这意味着它们占据其父元素的整个宽度，即使其宽度小于父宽度。另一方面，内嵌块像拼图一样拼凑在一起，水平流动而不是垂直流动。

Answer 3

正如@isherwoord在第一条评论中所说，将div＃up和div＃down一起包装在另一个div中，例如div＃column

（我希望你不介意HAML编写HTML的方式。）

div#column
  div#up
  div#down

div#middle
div#right

Answer 4

如果您知道高度/宽度，可以使用position:relative;top:-100px;设置#down的顶部位置以将其拉回。

示例：

＆＃13;

＆＃13;

#up {
  width: 33.3%;
  height: 100px;
  background: #CCCCCC;
  float: left;
}
#down {
  width: 33.3%;
  height: 100px;
  background: #999999;
  float: left;
  position:relative;
  top:-100px;
}
#mid {
  width: 33.3%;
  height: 200px;
  background: #999999;
  float: left;
}
#right {
  width: 33.3%;
  height: 200px;
  background: #CCCCCC;
  float: left;
}

＆＃13;

<div id="up"></div>
<div id="mid"></div>
<div id="right"></div>
<div id="down"></div>

＆＃13;

＆＃13;

＆＃13;