Question

这真的不应该像我要做的那样困难 - 我确信解决方案很简单。

我正在努力完成两件事：

1）让#left内的#right和.container与#footer并排坐在一起。理想情况下，#right只会成为触及#topstrip和#bottomstrip的分隔符（其中没有文字），右侧会有第三个div。

2）在#navbar的水平上设置徽标，但在左侧。

Answer 1

您可以在容器中浮动左右div，然后使用clearfix使它们同样高：http://www.webtoolkit.info/css-clearfix.html

因为我们都遇到了这种布局问题，所以已经创建了几个非常好的css框架来完成这个繁重的工作。让你专注于建立内容，而不是锅炉板的东西。我个人使用yaml（http://www.yaml.de/）并且从那时起就没有回头。我可以全心全意地推荐它。

Answer 2

你可以使用表格

<table width="100%" border="0">
<tr>
<td colspan="3"><div id="navbar"><img src="YOUR LOGO SOURCE HERE" align="left"/>navbar section</div></td>
</tr>
<tr>
<td><div id="left">left section</div></td>
<td><div class="container">container</div></td>
<td><div id="right">right section</div></td>
</tr>
<td colspan="3"><div id="footer">footer section</div></td>
</table>

然后您可以根据需要更改每个<TD>的宽度和高度该表设置为整个页面宽度，您可以将height="100%"添加到表格标签，也可以添加自定义宽度和高度。您可以border="0"将其更改为border="1"以查看表格限制等。

玩得开心：）

基本的并排嵌套<div>定位</div>

2 个答案: