任何人都可以帮助解决这个定位问题吗？我希望左侧菜单垂直放置，没有任何空白。您可以从 the website
查看如果您可以从那里获得帮助，也可以使用以下整个代码，谢谢
html index.html
<!DOCTYPE html>
<!-- saved from url=(0064)http://toytic.com/class/examples/e808_html5_Header2NavAside.html -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Web site</title>
<link href="style.css" rel="stylesheet" />
<style>
</style>
<!-- Tell IE we are using html5 + CSS -->
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<div id="wrapper">
<header id="site">
<h1>WEBSITE</h1>
</header>
<article>
<header>
<h2>This is the article header</h2>
<time datetime="25-11-2010" pubdate="">25th November 2010</time>
</header>
<section id="abstract">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et orci sed neque tincidunt dictum nec at lacus. Fusce feugiat sagittis ligula ac aliquam. Integer ut sodales justo. Etiam ultrices cursus iaculis. Suspendisse bibendum. </p>
</section>
<section id="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ac velit mauris. Nulla cursus pretium dapibus. Fusce at faucibus mi. Etiam ac nisi condimentum quam vulputate euismod. Nunc viverra consectetur tempor. Praesent rutrum diam in leo lacinia sit amet volutpat leo tempus. Donec sodales, velit et viverra imperdiet, velit leo placerat libero, fringilla scelerisque justo sapien sit amet sapien. Donec blandit tellus at mi hendrerit hendrerit. Sed suscipit sagittis sodales. Etiam sagittis, tortor quis sagittis laoreet, erat nibh mollis sem, ut tristique felis augue non metus. </p>
<p>Etiam in gravida mi. Maecenas placerat, justo vel gravida egestas, odio sem dictum justo, eget volutpat massa augue in augue. Sed tempus sem a nulla eleifend aliquet aliquet diam pharetra. Proin sit amet imperdiet est. Cras vitae felis in nulla tristique porttitor ut sit amet neque. Quisque sed nisi quam. Aliquam erat volutpat. Nullam dignissim augue odio. Nam sit amet ipsum arcu, id rutrum felis. Phasellus velit mauris, dictum eget tincidunt eget, condimentum eget risus. Proin nibh nulla, sagittis et feugiat in, luctus quis velit. Aenean lobortis mi ut odio accumsan adipiscing. Nulla quis ipsum magna. Suspendisse auctor mauris eu mi cursus ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas gravida vulputate leo, consectetur porta sem euismod nec. Donec et dolor lectus, vel cursus massa. Morbi eu dictum arcu. Fusce luctus porttitor neque, sed eleifend orci tristique convallis. </p>
</section>
</article>
<nav>
<ul>
<li>About</li>
<li>Service</li>
<li>Contact</li>
</ul>
</nav>
<footer>
<div class="col">
<h4>Contact</h4>
<adress>
<p><a href="http://toytic.com/class/examples/e808_html5_Header2NavAside.html#">Janet Griffith</a> from Public Relations</p>
<p><a href="http://toytic.com/class/examples/e808_html5_Header2NavAside.html#">Jil Sanders</a>, webmaster</p>
</adress></div>
<div class="col">
<h4>Sites of interest</h4>
<aside>
<p><a href="http://toytic.com/class/examples/e808_html5_Header2NavAside.html#">Site A</a></p>
<p><a href="http://toytic.com/class/examples/e808_html5_Header2NavAside.html#">Another one</a></p>
</aside>
</div>
<div class="col">
<h4>Legal stuff</h4>
<p>Copyright</p>
<p>Terms of Service</p>
</div>
</footer>
</div>
</body></html>
样式表 style.css
/* reset the margin and padding and tell the browser to render all HTML5 section tags as block. ->*/
* {margin:0px; padding:0px;}
header, hgroup, footer, section, aside, article, figcaption, figure, nav {
display: block;
}
/* <- reset the margin and padding and tell the browser to render all HTML5 section tags as block.*/
/*The CSS for the basic layout looks like follows. First, by wrapping all other content with the wrapper div we restrict the overall page width to 90% of the browser and leave a little bit of extra margin to the top-border. In addition, the margin-left / margin-right is set to auto meaning our content will always be centered inside the browser.*/
/*Open the code in a new window and resize it to see how the width adapts! First, in our CSS section we introduce a little bit of padding between the browser window and the content. Then, we add some color to the header and footer to actually see them.*/
/* The wrapper centers the rest of the content */
div#wrapper {width:90%; margin: 10px auto;}
/* add some color to distinguish the three sections of the document: header, the main section and the footer. */
/* Next, we set explicitly the height of the header to 80 pixels, add some background color and padding. The margin values introduce top and bottom spacing of 10px. In addition all content will be centered with text-align:center. */
header#site {
height:80px;
padding:10px;
background-color:#0033FF;
margin:10px 0px;
text-align:center;
}
/*Finally, the footer. Usually has a small font-size which is set in our example to 0.8 units of the standard size. Again, some background color. The clear:both make sure that the footer actually is displayed below the main article; it explictly tells the browser that no floating elements are allowed on both sides of the footer.*/
footer {
font-size:0.8em;
clear:both;}
footer .col {
width:30%;
margin:1% 1.1%;
padding:2px;
height:100px;
background-color:#F63;
float:left;
}
nav {
background-color:#0033FF;
float:left;
width:30%;
height:100%;}
nav ul {
list-style:none;}
nav ul li {
float:left;}
nav ul li a {
display: block;
background-color:#CCC;
margin-right: 20px;
width: 110px;
line-height:1.5em;
text-align: center;
text-decoration: none;
color: #000;
}
nav ul li a:hover {
color: #fff;
background-color:#39C;
}
/*The actual trick of aligning both the main article and the navigation horizontally on the same line is done with float:left; while making sure that both fill the full available width. Note that although the sum of the article + nav layer adds up to 100%, the padding introduced for the body actually reduces the overall width to 90% of the browser window.*/
/*The CSS for the article tag. Here we have to make sure that we leave some space for the advertising, so we set its width to 80%. In addition, in order to prevent that the ads are being pushed below the main article, we set float:left.*/
article {
background-color:#0066FF;
float:left;
width:69%;
margin-right:10px;
margin-left:31%;
}
article header {
background-color:#F90;
padding:15px;
}
section#abstract {
font-size:1.09em;
font-style:italic;
margin:10px 0px;
text-align:justify;
padding:5px 80px;
}
section#main {
font-size:1em;
padding:20px;
text-align:justify;
}
/*
section#main{
float: left;
margin: 0;
padding: 0;
display: inline;
}
*/
/* On the right border we place the ads. This is done with the aside tag indicating only remotely related content to the actual article. Each ad has a specific height and width. The overall width together with the main article adds up to 98% (80% + 18%). This is necessary because we have to take into account the 10px margin-right of the article. float:left makes sure the ads are really on the same height as the main article (not below). */
.ads {
height:100%;
width:30%;
background-color:#0033FF;
margin-bottom:0px;
float:left;
}
.ads p:first-child {
padding:15px;
font-size:2em;}
.ads p:last-child {
padding-left:15px;
font-size:1em;color:#CCC;}
我希望这看起来像我当前的网站
答案 0 :(得分：2)
尝试使用：
nav {
background-color:#0033FF;
float:left;
width:30%;
height:100%;}
article {
background-color:#0066FF;
float:right;
width:69%;
margin-right:10px;
}
答案 1 :(得分：0)
从float:left移除article，然后将其设为float:right
制作nav float:left
在
之后添加clear:both
答案 2 :(得分：0)
这是一个显示我的解决方案示例的jsfiddle ... http://jsfiddle.net/zfn7L/
首先，如其他人所说，将文章更改为float: right，删除margin-left: 31%，然后删除li元素的浮动样式。然后在文章中移动导航，删除所有定位/大小调整，并添加以下内容：
nav {
position: absolute;
left: 0;
bottom: 0;
top: 110px; /* Takes into account the header */
width: 29%;
}
最后，只需将position: relative添加到div#wrapper，这样导航的绝对定位可以基于较大的容器，你应该好好去！
答案 3 :(得分：0)
嗯，这是结构：
<强> HTML
<header></header>
<section>
<div id="content"></div>
<div id="side"></div>
<div style="clear: right;"></div>
</section>
<footer></footer>
根据您的情况，您应该将float添加到您的身边或内容中，这一点非常重要。
结帐这个小提琴 - ＆gt; http://jsfiddle.net/aldiunanto/EsDcX/