CSS和div定位

Question

我正在尝试使用div而不是通常的表格来创建一些html。

我想要的是#hdrdetail div显示在#company div下面 - 橙色div从绿色div下方开始显示。我不确定应该如何使用浮动。

希望这提供了足够的信息来回答问题。

#maindiv {
      background-color: yellow;
      height: 100 % ;
      width: 700px;
      margin: auto;
}
#logoleft {
      width: 25 % ;
      float: left;
      height: 40px;
      background-color: red;
}
#company {
      width: 50 % ;
      float: left;
      height: 80px;
      background-color: green;
}
#logoright {
      width: 25 % ;
      float: right;
      height: 40px;
      background-color: red;
}
#hdrdetail {
      float: none;
      width: 100 % ;
      height: 80px;
      background-color: orange;
}
#weekly_lefthdr {
      float: left;
      width: 50 % ;
      height: 60px;
      background-color: blue;
}
#weekly_righthdr {
      float: right;
      width: 50 % ;
      height: 60px;
      background-color: aliceblue;
}

<div id="maindiv">
  <div>
    <div id="logoleft"></div>
    <div id="company"></div>
    <div id="logoright"></div>
  </div>
  <div id="hdrdetail">
    <div id="weekly_lefthdr">
    </div>
    <div id="weekly_righthdr">
    </div>
  </div>
</div>

- Malcolm

---

一个小的JSFiddle会非常有帮助。不过，请尝试将clear:left;添加到hdrdetail中。 - ffflabs

Answer 1

您不需要设置float: none;，相反应该使用clear: both; ie;

。此操作可以清除之前使用float属性导致的浮动效果。

#hdrdetail {
  clear:both;
  width:100%;
  height:80px;
  background-color:orange;
}

float: none 只是取消元素的浮动，而在您的情况下，该元素并未设置浮动，而 clear: both 将使该元素放置在任何其上方浮动元素的下方。

希望这可以帮助您。

- worldofjr

Answer 2

这里是代码片段: http://jsfiddle.net/vcpfygpt/1/。你需要删除 float:none。

#hdrdetail {
  clear:both;
  width: 100% ;
  height: 80px;
  background-color: orange;
}

将其替换为clear:both。规则clear:both设置了“左侧或右侧都不允许浮动元素”的条件。

- user3681587