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

我想从头开始创建自己的网站，现在我遇到了考虑HTML/CSS位的问题。我如何确保div保留剩余的水平空间？

我想创造这个标准的“标题，导航，内容”布局，其中头位于顶部，导航是在左边和内容开始的头下方和航行权

我用下面的代码：

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

但只要“风格=‘浮动：左’”添加到我的代码，“内容”和“导航” DIV会自动移动到右侧的“头”DIV，有可能以某种方式使“头”DIV“保留”剩余空间，以便“内容”和“导航”DIV不会移动到它的右侧，但保持下面？

来源

2013-09-23 Exasis

是你的资产净值固定宽度？同样，如果你只是想让nav低于头部，就在它的样式中添加'clear：left' - 你需要阅读清除浮动元素 – Pete

引导程序看起来相当不错。肯定会看到它:) – Exasis

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

来源

2013-09-23 09:46:21

此问题被称为“折叠父项”。为了防止这个，你必须清除浮动。

这个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-23 09:51:43 Alex

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

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

- 可以使用“浮动：左”为标签id = “NAV” 和“浮动：右”为标签id = “内容”

下面是结果：http://jsfiddle.net/4JgA4/119/ =>无需注意所有我的信息内的一些标签（只适用于装饰品：D）

来源

2013-09-23 10:23:57

清除浮标会做。

你需要一个类添加到您的股利和在你的CSS如下：

.clear 
{ 
    clear:both; 

}

来源

2013-09-23 12:12:31 Vignesh

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

回答

相关问题