Question

说我有以下DIV：

<div id="top">Page header</div>
<div id="main">Main content</div>
<div id="sidebar">Sidebar content</div>
<div id="bottom">Page footer</div>

如何使用CSS将侧边栏DIV放置在主DIV的右侧，并将其设置为，例如，总宽度的20％？

我也想在四个DIV之间留一些边距，这样布局看起来就不会太狭窄。

希望它能在“所有”浏览器中运行，包括那个混蛋IE6 ......

Answer 1

将main和sidebar放在包装器中，您可以设置包装器的大小/位置并保留您的布局。

#top {
  /* top stuff */
}
#wrapper {
  width: 800px;
  margin: 0px auto; /* centers on page */
}
#main {
  float: left;
  width: 80%;
  margin-right: 10px;
}
#sidebar {
  float: left; /* by floating left here you have a greater control over the margin */
  width: 20%;
}
#bottom {
  /* bottom stuff */
}

Answer 2

使用float s，否定margin和padding。

你可以在http://alistapart.com找到关于页面布局的好教程（我真的推荐 the holy grail ），它也会解决很多跨浏览器的问题

http://www.alistapart.com/articles/holygrail

Answer 3

尝试：

html, body, div { margin: 0; padding: 0; border: 0 none; } /* primitive reset CSS */
#main { float: left; width: 80%; }
#sidebar { float: right; width: 20%; }
#bottom { clear: both; }

使用reset CSS（还有其他人）这一点非常重要，因为不同的浏览对边框，边距和填充等内容都有不同的默认值。

Answer 4

<div id="top">Page header</div>
<div id="main">
    <div id="content">Main content</div>
    <div id="sidebar">Sidebar content</div>
</div>
<div id="bottom">Page footer</div>


#top, #main, #bottom { float: left; clear: both; width: 100%; margin-bottom: 1em; }
#sidebar { float: right; width: 20%; }
#content { float: right; }

Answer 5

将doc类型设置为strict，ala非常重要：

如果你这样做，你不需要清除你的CSS（有一些例外），只需使用正确的盒子模型。

Answer 6

我将通过本文的链接回答我自己的问题，这正是我所寻找的：

http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/

使用CSS放置DIV

6 个答案: