如何确保 div 保留剩余的水平空间？答案

【问题标题】：How do i make sure that a div reserves the remaining horizontal space?如何确保 div 保留剩余的水平空间？
【发布时间】：2013-09-23 20:12:31
【问题描述】：

我正在尝试从头开始创建自己的网站，现在考虑到 HTML/CSS 位，我遇到了问题。

我正在尝试创建这种标准的“标题、导航、内容”布局，其中标题位于顶部，导航位于左侧，内容从标题下方和导航右侧开始

我使用以下代码：

<div id="head">
 <img src="..." id="logo" style="float:left">
</div>
<div id="nav">
  {some elements}
</div>
<div id="content">
 {some elements}
</div>

但是，一旦将“style='float:left'”添加到我的代码中，“content”和“nav”DIV 就会自动移动到“head”DIV 的右侧，是否有可能以某种方式使"head" DIV "保留" 剩余空间，这样 "content" 和 "nav" DIV 不会向右移动，而是停留在下方？

【问题讨论】：

您的导航是固定宽度吗？此外，如果您只是希望导航位于头部下方，请将 clear:left 添加到它的样式中 - 您需要阅读清除浮动元素
那个引导程序看起来很不错。一定会调查的:)

标签： css html css-float positioning

【解决方案1】：

这个问题被称为“折叠的父级”。为防止这种情况，您必须清除浮动。

将此 CSS 添加到您的样式表中：

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

并将“clearfix”类添加到您的标题中，例如

<div id="head" class="clearfix">
    <img src="..." id="logo" style="float:left">
</div>

有关清除浮动的更多信息，您可以查看此网址 - http://www.tutorialrepublic.com/css-tutorial/css-alignment.php

【讨论】：

【解决方案2】：

<div style="width:250px;">
  <div id="head" style="width:100%; border:1px solid red;">
    <img src="..." id="logo"> Header-Logo
  </div>
  <div id="nav" style="float:left;width:47%;border:1px solid blue;">
    Navigation-Left
  </div>
  <div id="content" style="float:right; width:50%;border:1px solid blue;">
    Content-Right
  </div>
</div>

-我认为原因是标签 id="head" 内的 "float:left"。因为你想把标题放在网站的顶部，所以不需要使用“float:left”。

-您可以将 "float:left" 用于标签 id="nav" 和 "float:right" 用于标签 id="content"

结果如下：http://jsfiddle.net/4JgA4/119/ => 无需注意某些标签内的所有信息（仅用于装饰：D）

【讨论】：

【解决方案3】：

清除浮动就可以了。

您需要在 div 和 css 中添加一个类，如下所示：

.clear
{
    clear:both;

}

【讨论】：

【解决方案4】：

将overflow:hidden 添加到#head 元素。我不知道它为什么起作用，但它确保所有浮动元素都包含在父元素中。

【讨论】：