具有页眉、页脚、边块和主块的网页模板
具有页眉、页脚、边块和主块的网页模板
提问于 2014-08-14 13:59:31
我已经制作了一个网页模板(代码在下面)。我发现的问题是，我不能使边的部分粘在左右边，这样中间的部分就能填满剩余的空间。我尝试使用CSS的左/右浮动，但它没有工作。我要把这三个街区分开，不管它们里面有什么。我还试图将显示更改为内联块。下面的代码显示了我能走多远。该代码也可在在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>通过使用表、tr和that标记，我设法获得了结果，但我对此并不满意。我想了解我还能做些什么。如果有人能帮我解决这个问题，我将非常感激，我可以使用适当的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>回答 1
Stack Overflow用户
发布于 2014-08-14 16:05:27
尝尝这个。你没有考虑到垫子的问题。
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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25309958
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号