Question

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

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

希望这是足够的信息来回答。

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 1

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

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

float: none将取消设置元素的浮动，在您的情况下无论如何都不会设置，而clear: both会将元素置于其上方任何浮动元素的下方。

希望这有帮助。

Answer 2

这是小提琴：http://jsfiddle.net/vcpfygpt/1/。您需要删除

中的float:none

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

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

CSS和div定位

2 个答案: