Question

我正在尝试从头开始创建自己的网站，现在我遇到了一个考虑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的右侧，是否有可能以某种方式制作“头部”DIV“预留”剩余空间，以便“内容”和“导航”DIV不会向右移动，但保持在下方？

Answer 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

Answer 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/ =＆GT;无需注意某些标签内的所有信息（仅供装饰：D）

Answer 3

清理花车就行了。

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

.clear
{
    clear:both;

}

Answer 4

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

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

4 个答案: