为布局放置 div 标签 [关闭]答案

【问题标题】：Placement of div-tags for layout [closed]为布局放置 div 标签 [关闭]
【发布时间】：2012-03-21 21:22:05
【问题描述】：

我已经尝试了几个小时来正确放置 div。我现在意识到我需要一些专业的帮助。

图片应该很容易解释。

【问题讨论】：

我添加了你的图片，但是你的代码在哪里？这就是我们需要看到的以帮助您。请点击edit添加您的HTML和CSS，并注意代码格式化工具。

标签： css html

【解决方案1】：

HTML：

<ul id="menu">
    <li>Menu stuff</li>
    <li>More menu stuff</li>
    ...More items...
</ul>
<div id="header">
    ...Header content...
</div>
<div class="columns"><!-- This may be a candidate for a UL or an OL -->
    <div class="column"></div><div class="column"></div><div class="column"></div>
</div>
<div id="content">
    ...Content...
</div>

CSS：

#menu {float: left; width: 75px; height:100%;}
#header {height: 100px;}
.columns {height: 300px;}
.column {display:inline-block;width: 33.33%;}

将三个column divs 放在一起很重要，以防止它们之间出现任何空格，因为display:inline-block;。

这里唯一真正的问题是 100% 高度菜单 div。因为它是 floated（将其他内容推高 75 像素），所以 height:100% 不起作用。有两种可能的解决方案：

1) 将菜单栏的所有内容放在容器 div 中，并给它一个 margin-left:75px;

2) 给菜单一个固定的像素高度。

【讨论】：

【解决方案2】：

下面的链接应该会给你一个好主意。我设置了不同的背景颜色，以便您可以看到所有内容的位置。您将遇到的唯一麻烦是您不能执行“100% - 75px”，所以我将其设置为 500px。

link

【讨论】：

@Gareth 感谢您的建设性批评。 Here is a fiddle with the code you posted. 一点都不像照片。它需要外部容器 div 以便左侧栏的高度与页面其余部分的高度匹配。
您接受了我的回答，将第一个解决方案应用于我指出的问题，并将其发布为您自己的 jsFiddle。感谢您提醒我为什么不再在这里回答问题。
我很高兴你对自己的想法如此之多，以至于你能够在一个页面上制作几个 div，并且任何做类似事情的人都复制了你的代码。直到您的第一次讽刺评论之后，我才阅读您的回答。感谢您对实际正确答案的反对意见。你真的进入了在这个网站上帮助人们的精神:-)