2

我正在尝试从头开始创建自己的网站，现在考虑到 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 不会向上移动到它的右侧，而是留在下面？

4

4 回答 4

2

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

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

于 2013-09-23T09:51:43.727 回答
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）

于 2013-09-23T10:23:57.533 回答
1

清除浮动就可以了。

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

.clear
{
    clear:both;

}
于 2013-09-23T12:12:31.987 回答
0

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

于 2013-09-23T09:46:21.637 回答