Question

我有一个主div，里面有2个div，还有一个辅助div。为了让主要内部的div成为poisition，我希望他们能够将我的位置设置为相对而且它有效，但是由于某种原因，辅助div现在位于主div（在浏览器中）之上。我可能错误地使用了位置，如果有人能够纠正我的话会对我有所帮助。

＆＃13;

    #main {
      position: relative;
    }
    #right {
      float: right;
      position: relative;
      display: inline-block;
    }
    #left {
      float: left;
      position: relative;
      displayLinline-block;
    }
    #subDiv {
      position: relative;
    }

＆＃13;

<div id="main">
  <div id="left">
  </div>
  <div id="right">
  </div>
</div>
<div id="subDiv">
</div>

＆＃13;

浏览器显示：

<div id="subDiv">
</div>
<div id="main">
<div id="left">
</div>
<div id="right">
</div>
</div>

我的错误是什么？

Answer 1

它并不完全清楚你想要实现的外观，但它听起来就像你需要清除浮动一样。

有多种清除方法，详见THIS堆栈溢出问题

＆＃13;

#left,
#right,
#subDiv {
  height: 50px;
}
#left {
  float: left;
  width: 50%;
  background: red;
}
#right {
  float: left;
  width: 50%;
  background: blue;
}
#subDiv {
  background: green;
  clear: both;
}

＆＃13;

<div id="main">
  <div id="left">
  </div>
  <div id="right">
  </div>
</div>
<div id="subDiv">
</div>

＆＃13;

Answer 2

你需要在2个浮动div周围包含一个clearfix。此外，使用显示内联块而不是浮动，而不是添加。您的css“displayLinline-block”中也有拼写错误;但这可能只是你的榜样。

你可以创建一个像这样的新类：

.cf:after { visibility:hidden; display:block; content:"" ; clear:both; height:0px;}

然后将所有浮动元素包装在一个名为“cf”的分类中，这将解决您的问题。

<div class="cf">
<div class="fleft"> this is a div floating left </div>
<div class="fright"> this is a div floating right </div>
</div> <!-- //clearfix -->

<div> another div with more content that is not interferred with content above. </div>

Answer 3

清除花车的div。另外，请注意CSS中有拼写错误。＆＃34; displayLinline块＆＃34;

Div以错误的顺序堆叠在彼此之上

3 个答案: