Question

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

<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;或显示：inline-block;但我认为这不是正确的方法！？

希望有人可以帮助我

最好的问候

Answer 1

你必须清除漂浮物。例如：

<br style="clear: both" />

＆＃13;

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

＆＃13;

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

＆＃13;

Addinional，您可以使用pseudo-element :after来清除浮动广告：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

你应该清除浮动的内部元素。您甚至不必更改HTML。您也可以使用after伪元素在CSS中执行此操作：

＆＃13;

#header {width:100%; float:left;}
#header-inner {width:600px; margin:0 auto; border: 1px solid red;}
#top-left {float:left;}
#top-right {float:right;}
#header-inner::after{
    display: block;
    content: "";
    clear: both;
}

＆＃13;

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

＆＃13;

Updated fiddle

HTML容器元素没有高度

2 个答案: