HTML 容器元素没有高度

<分区>

我的模板的页眉部分没有获得其嵌套元素的高度。

<header id="header">
    <div id="header-inner">
        <div id="top-left">
            <a href="#" title="something" rel="home">Site Title</a>
        </div>

        <nav id="top-right">
            <div class="menu">
                <ul>
                    <li class="current_page_item"><a href="#">Home</a></li>
                    <li class="page_item page-item-2"><a href="#">Home2</a></li>
                </ul>
            </div>
        </nav>
    </div>
</header>

#header {width:100%; float:left;}
#header-inner {width:600px; margin:0 auto;}
#top-left {float:left;}
#top-right {float:right;}

我还做了一个jsfiddle:

http://jsfiddle.net/hqpb3cyc/

我知道的唯一解决方案是给#header 和/或#header-inner float:left;或显示:内联 block ；但我认为这不是正确的方法!？

希望有人能帮助我

最好的问候

最佳答案

你必须清除 float 。例如:

<br style="clear: both" />

#header {
  width: 100%;
  float: left;
  background: #D3D3D3;
}
#header-inner {
  width: 600px;
  margin: 0 auto;
}
#top-left {
  float: left;
}
#top-right {
  float: right;
}

<header id="header" role="banner">
  <div id="header-inner">
    <div id="top-left">
      <a href="#" title="something" rel="home">Site Title</a>
    </div>

    <nav id="top-right">
      <div class="menu">
        <ul>
          <li class="current_page_item"><a href="#">Home</a>
          </li>
          <li class="page_item page-item-2"><a href="#">Home2</a>
          </li>
        </ul>
      </div>
    </nav>
  </div>
  <!-- clear both floats -->
  <br style="clear: both" />
</header>

此外，您可以使用伪元素 :after 来清除 float :

#header {
  width: 100%;
  float: left;
  background: #D3D3D3;
}
#header-inner {
  width: 600px;
  margin: 0 auto;
}
#top-left {
  float: left;
}
#top-right {
  float: right;
}
#header-inner:after {
  content: "";
  clear: both;
}

<header id="header" role="banner">
  <div id="header-inner">
    <div id="top-left">
      <a href="#" title="something" rel="home">Site Title</a>
    </div>

    <nav id="top-right">
      <div class="menu">
        <ul>
          <li class="current_page_item"><a href="#">Home</a>
          </li>
          <li class="page_item page-item-2"><a href="#">Home2</a>
          </li>
        </ul>
      </div>
    </nav>
  </div>
</header>

关于HTML 容器元素没有高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27491764/

上一篇：html - 当页面宽度为768px时如何替换按钮的内容？

下一篇：javascript - 所有主流浏览器上的 SVG Amazon S3 CORS 问题

css - 我怎样才能使我网站上的幻灯片居中显示在屏幕中央？

html - 在 bs4 框中正确包装文本

html - 微博 : how to make div wrap around photo?

javascript - ng-if 内的 ng-repeat 不起作用

html - 在div中间居中表格，垂直和水平

html - Blogspot。如何删除背景图片？它是我张贴的照片的副本

javascript - 调整从事件目录中提取的照片的大小

javascript - .each() 表现得很奇怪

css - chrome 中的打印命令不应用 css 样式