html - CSS 和 div 定位

Question

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

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

希望这些信息足以回答。

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

Answer 1

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

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

float: none 只会取消设置元素的 float ，在您的情况下无论如何都没有设置，而 clear: both 会将元素放在任何 float 的下方它上面的元素。

希望这对您有所帮助。