如何使绿色DIV适合2个上方的div？

时间：2016-06-08 11:26:20

标签： html css html5 css3

为了使深绿色div（Inner3）位于蓝色和粉红色div（分别为Inner1和Inner2）之后（下方），我能做些什么？目前存在某种“空间”。

注意：我将橙色div用于它们之后，然后只有绿色div，形成确实很重要（我正在尝试学习如何在更改媒体查询的分辨率时更改css）。 

.OuterDiv {
  width: 100%;
  overflow: hidden;
  padding: 0px;
  margin: 0px;
  background-color: #E3EAD7;
  height: 100%;
}
.Inner1 {
  width: 30%;
  background-color: #6D97C0;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
  height: 200px;
  float: left;
}
.Inner2 {
  width: 30%;
  background-color: #ECB7D8;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
  height: 200px;
  float: left;
}
.Inner3 {
  width: 300px;
  background-color: #F5E6AD;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
  height: 300px;
}
.Inner4 {
  width: 60%;
  background-color: #728666;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
  height: 200px;
  float: left;
}
<body>

  <div class="OuterDiv">
    <div class="Inner1"></div>
    <div class="Inner2"></div>
    <div class="Inner3"></div>
    <div class="Inner4"></div>
  </div>

</body>

6 个答案:

答案 0 :(得分：0)

您需要更改html结构才能实现此类行为。 其他类型的解决方案（给Inner4等提供负余量）并不好。

＆＃13;
＆＃13; 
.OuterDiv {
  width: 100%;
  overflow: hidden;
  padding: 0px;
  margin: 0px;
  background-color: #E3EAD7;
  height: 100%;
}
.Inner1 {
  width: 30%;
  background-color: #6D97C0;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
  height: 200px;
  float: left;
}
.Inner2 {
  width: 30%;
  background-color: #ECB7D8;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
  height: 200px;
  float: left;
}
.Inner3 {
  width: 300px;
  background-color: #F5E6AD;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
  height: 300px;
}
.Inner4 {
  width: 60%;
  background-color: #728666;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
  height: 200px;
  float: left;
}
＆＃13; 
<body>

  <div class="OuterDiv">
    <div>
      <div class="Inner1"></div>
      <div class="Inner2"></div>
      <div class="Inner4"></div>
    </div>
    <div class="Inner3"></div>
  </div>

</body>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

将position:relative添加到.inner3和.inner4，然后使用保证金和顶级属性处理

＆＃13;
＆＃13; 
.OuterDiv {
  width: 100%;
  overflow: hidden;
  padding: 0px;
  margin: 0px;
  background-color: #E3EAD7;
  height: 100%;
}
.Inner1 {
  width: 30%;
  background-color: #6D97C0;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
  height: 200px;
  float: left;
}
.Inner2 {
  width: 30%;
  background-color: #ECB7D8;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
  height: 200px;
  float: left;
}
.Inner3 {
  width: 300px;
  background-color: #F5E6AD;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
  height: 300px;
  position: relative;
  top: 200px;
}
.Inner4 {
  width: 60%;
  background-color: #728666;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
  height: 200px;
  float: left;
  position: relative;
  top: -300px;
}
＆＃13; 
<body>

  <div class="OuterDiv">
    <div class="Inner1"></div>
    <div class="Inner2"></div>
    <div class="Inner3"></div>
    <div class="Inner4"></div>
  </div>

</body>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

如果将inner3的顺序更改为4和4更改为3将起作用

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
<style type="text/css">.OuterDiv {
  width: 100%;
  overflow: hidden;
  padding: 0px;
  margin: 0px;
  background-color: #E3EAD7;
  height: 100%;
}
.Inner1 {
  width: 30%;
  background-color: #6D97C0;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
  height: 200px;
  float: left;
}
.Inner2 {
  width: 30%;
  background-color: #ECB7D8;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
  height: 200px;
  float: left;
}
.Inner3 {
  width: 300px;
  background-color: #F5E6AD;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
  height: 300px;
}
.Inner4 {
  width: 60%;
  background-color: #728666;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
  height: 200px;
  float: left;
}
</style>
</head>

<body>

  <div class="OuterDiv">
    <div class="Inner1"></div>
    <div class="Inner2"></div>
    <div class="Inner4"></div>
    <div class="Inner3"></div>
  </div>

</body>

</html>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

刚刚更改了以下内容：

.Inner3 {
 ...
  float:right;
}

它就像一个魅力。

JSFiddle Demo

答案 4 :(得分：0)

添加此代码后，您的绿色div（在蓝色和粉红色下方或下方）。所以，在顶部，我们在绿色下面有蓝色，粉红色和。如果你愿意，你甚至可以从你的html代码中删除橙色，但在那个阶段将set margin-top移回到.Inner4的边距0。

.Inner3 {
  width: 300px;
  background-color: #F5E6AD;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
  height: 300px;
  float:left;
}
.Inner4 {
  width: 60%;
  background-color: #728666;
  padding: 0px;
  margin-top: -100px;
  overflow: hidden;
  height: 200px;
  float:left;
}

答案 5 :(得分：0)

<强> HTML 

<div class="block pink "></div>
<div class="block blue "></div>
<div class="block green"></div>
<div class="block orange"></div>

<强> CSS 

.block {
  width: 200px;
  height: 200px;
}

.floatLeft {
  float: left;
}

.floatRight {
  float: right;
}

.pink {
  background: #ee3e64;
}

.blue {
  background: #44accf;
}

.green {
  background: #b7d84b;
}

.orange {
  background: #E2A741;
}

案例1：没有任何浮动

Case 1

案例2：只有粉红色浮动

粉红色流出并漂浮在左边，休息所有的div都存在，好像粉红色不存在（因为蓝色，绿色和橙色没有漂浮）。因此蓝色低于粉红色。

Case 2

案例3：只剩下蓝色浮动

由于float只影响浮动div之后的div，因此粉红色仍然保留在案例1中。并且蓝色向左浮动。绿色和橙色就好像没有蓝色一样。

Case 3

案例4：只剩下绿色浮动

Case 4

自己检查。

案例5：只有粉红色浮动

粉红色正好漂浮，流出。其他人就像粉红色缺席一样。

Case 5

案例6：只有蓝色浮动

粉红色未受影响，因为浮动的div（蓝色）在它之后（在HTML结构中）。蓝色正好漂浮在流动之外。绿色和橙色就好像没有蓝色一样。

Case 6

案例7：只有绿色浮动

粉红色和蓝色不受影响，因为漂浮的绿色是在它们之后。绿色正好浮出水面。橙色就像绿色不存在一样。

Case 7

案例8：粉红色 - ＆gt;向左浮动，蓝色 - >向右浮动

现在观察粉红色和蓝色都不流动。因此绿色和橙色就像没有粉红色或蓝色一样存在。但由于漂浮，粉红色高于绿色。

Case 8

案例9：粉红色 - ＆gt;向右浮动，蓝色 - >向左浮动

再次，观察到粉红色和蓝色都不流动。因此绿色和橙色就像没有粉红色或蓝色一样存在。但由于漂浮，蓝色高于绿色。

Case 9

案例10：粉红色 - >向右浮动，绿色 - >向左浮动

只需在任何网络浏览器上检查元素，并亲自查看各个部门的位置。这样你会更好地理解。

Case 10

现在你可以自己试验并更好地理解浮子的概念：）

您的问题类似于：

Demo 1

不同之处在于所有div都具有溢出：隐藏属性。这样可以确保绿色不会隐藏在粉红色下面，如下所示：

Demo 2

我刚刚将Demo 1更改为（我的解决方案）：

Demo 3

相关问题
最新问题