我制作了一个网页模板（下面的代码）。我发现的问题是我不能让侧面部分粘在左右边缘上，这样中间就会填满剩下的空间。我尝试使用CSS的左/右浮动但它不起作用。无论它们是否包含，我都需要三个块保持分离。我还尝试将显示更改为内联块。下面的代码显示了我可以走多远。该代码也可在here on JS Fiddle上找到。
<html>
<head>
<style>
section,article,header,footer,nav,aside,h1,h2,h3,h4,p,ul,li {
margin: 0;
padding: 0;
}
html {
padding: 10px;
margin: 0;
background-color: #00d;
}
body {
margin: 0;
padding: 0;
background-color: #ddf;
}
nav {
background-color: red;
}
footer {
background-color: yellow;
clear: both;
}
li {
list-style-type: none;
list-style-image: none;
}
#top {
background-color: grey;
padding: 10px 20px;
}
#container {
width: 100%;
}
#left {
vertical-align: top;
background-color: cyan;
width: 15%;
display: inline-block;
}
#main {
width: auto;
display: inline-block;
}
#right {
vertical-align: top;
background-color: magenta;
width: 25%;
display: inline-block;
}
</style>
</head>
<body>
<header id="top">
<h1>Top header</h1>
</header>
<nav>
<h2>Navigation bar</h2>
</nav>
<section id="container">
<aside id="left">
<ul>
<li>Left</li>
<li>Left</li>
<li>Left</li>
<li>Left</li>
<li>Left</li>
</ul>
</aside>
<section id="main">
<h2>Articles</h2>
<article>
<header>
<h4>Article 1</h4>
</header>
<p>You can easily change the fo</p>
</article>
<article>
<header>
<h4>Article 2</h4>
</header>
<p>Include items that are .</p>
</article>
<article>
<header>
<h4>Article 3</h4>
</header>
<p>You can easily change th.</p>
</article>
</section>
<aside id="right">
<ul>
<li>First</li>
<li>First</li>
<li>First</li>
<li>First</li>
<li>First</li>
</ul>
</aside>
</section>
<nav>
<h2>Navigation bar</h2>
</nav>
<footer>
<h4>The footer</h4>
</footer>
</body>
</html>
我设法通过使用table，tr和td HTML标签获得结果，但我对此并不满意。我想了解我还能做些什么。如果有人可以帮助我，我将如何使用正确的CSS选择器来获得相同的结果，我将不胜感激。我附上另一个代码，所以提出最终效果。此代码也可在Js Fiddle上找到。
非常感谢。
<!DOCTYPE html>
<html>
<head>
<style>
section,article,header,footer,nav,aside,h1,h2,h3,h4,p,ul,li,table,td,th {
margin: 0;
padding: 0;
}
html {
padding: 10px;
margin: 0;
}
body {
margin: 0;
padding: 0;
background-color: blue;
}
nav {
background-color: red;
}
footer {
background-color: yellow;
}
li {
list-style-type: none;
list-style-image: none;
}
table,th,td {
border: 0;
border-collapse: collapse;
vertical-align: top;
}
table#maintable {
width: 100%;
}
table#maintable td:nth-child(1) {
width: 150px;
background-color: #fcf;
}
table#maintable td:nth-child(2) {
width: auto;
background-color: #cfc;
}
table#maintable td:nth-child(3) {
width: 250px;
background-color: #dff;
}
#top {
background-color: grey;
padding: 10px 20px;
}
#artheader {
background-color: #8f8;
}
</style>
</head>
<body>
<header id="top">
<h1>Top header</h1>
</header>
<nav>
<h2>Navigation bar</h2>
</nav>
<section>
<table id="maintable">
<tr>
<td>
<aside>
<ul>
<li>Left</li>
<li>Left</li>
<li>Left</li>
<li>Left</li>
<li>Left</li>
</ul>
</aside>
</td>
<td>
<section>
<header id="artheader">
<h2>Articles</h2>
</header>
<article>
<header>
<h4>Article 1</h4>
</header>
<p>You can easily change the fo</p>
</article>
<article>
<header>
<h4>Article 2</h4>
</header>
<p>Include items that are .</p>
</article>
<article>
<header>
<h4>Article 3</h4>
</header>
<p>You can easily change th.</p>
</article>
</section>
</td>
<td>
<aside>
<ul>
<li>First</li>
<li>First</li>
<li>First</li>
<li>First</li>
<li>First</li>
</ul>
</aside>
</td>
</tr>
</table>
</section>
<nav>
<h2>Navigation bar</h2>
</nav>
<footer>
<h4>The footer</h4>
</footer>
</body>
</html>
答案 0 :(得分：0)
试试这个。你没有考虑填充。
<强> CSS
section,article,header,footer,nav,aside,h1,h2,h3,h4,p,ul,li {
margin: 0;
padding: 0;
}
html {
padding: 10px;
margin: 0;
background-color: #00d;
}
body {
margin: 0;
padding: 0;
background-color: #ddf;
}
nav {
background-color: red;
}
footer {
background-color: yellow;
clear: both;
}
li {
list-style-type: none;
list-style-image: none;
}
#top {
background-color: grey;
padding: 10px 20px;
}
#container {
width: 100%;
}
#left {
vertical-align: top;
background-color: cyan;
width: 15%;
display: inline-block;
}
#main {
width: auto;
display: inline-block;
}
#right {
vertical-align: top;
background-color: magenta;
width: 25%;
display: inline-block;
position:fixed;
right:10px;
}