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