为布局放置div标签

Question

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

图像应该是非常自我解释的。

Answer 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，将三个div display:inline-block;放在一起以阻止它们之间出现的任何空格非常重要。

这里唯一真正的问题是100％高度菜单div。因为它是float ed（将其他内容推送75px），height:100%无效。有两种可能的解决方案：

1）将菜单中的所有内容放入容器div中，然后将其设为margin-left:75px;

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

Answer 2

下面的链接应该会给你一个好主意。我设置了不同的背景颜色，以便您可以看到一切都在哪里。你唯一的麻烦就是你不能做“100％ - 75px”，所以我把它设置为500px。

link