我不知道为什么我的div容器有这么多的空隙

Question

正如你所看到的，我为div设置了边框，而我遇到的问题是容器div是如此之大，当我尝试减小其宽度时，内部的div会陷入混乱状态，因为它们会向下并垂直对齐....你能说出这里的问题是什么吗？我认为内容在“包装”div中是错误的，但我不知道出了什么问题。

正如你可以看到我是否缩放顶部的徽标div扩展但为什么内容div也不会扩展？

以下是CSS代码：http://codepad.org/OhItDeVq

最后，相关的HTML代码：http://codepad.org/RsOOgbGI

Answer 1

可能你需要你的包装器有点宽，因为它是菜单div和内容的小地方。从第二个屏幕截图中可以看到。

也许你需要这样的东西：

<强> CSS

.wrapper { width: 980px; position:relative; margin:0 auto; }
.header { background:red; clear:both; height:100px; }
.menu { width:160px; background:#ccc; float:left; height:300px; }
.content { margin-left:160px; height:400px; background:green; }

<强> HTML

<div class="wrapper">
    <div class="header"></div>
    <div class="menu"></div>
    <div class="content"></div>
</div>

Answer 2

我相信它可能与你的桌子有关。我强烈建议删除它并坚持使用纯<div>布局。

但是，如果您必须使用该表，可以在其中放置cellspacing="0" cellpadding="0"。

Answer 3

看起来您将容器div设置为：

width: 79%

容器div中的一些元素设置为100％，因此它们最终比容器宽，这就是为什么你会看到额外的空间。

我建议将容器div保持固定的像素宽度，然后使用固定或百分比宽度作为内部元素。这样它们将基于容器固定宽度并始终适合其内部。

希望有所帮助。

Answer 4

我同意其他人的意见。但似乎你正在使用其他时代的HTML。

除了数据表示之外，表格是邪恶的。

这绝不能用于设计目的。

我强烈建议您学习css的基础知识，然后尝试使用http://960.gs或http://cssgrid.net/等框架，这些框架非常适合静态或流畅的布局。

但是请再次尽量让你的标记尽可能轻松！