私の目標は、記事を leftnav と rightnav の中間に配置することです。私の現在の構文では、 leftnav と aside が互いに「衝突」することを許可しています。記事に margin-left と padding left を追加しましたが、うまくいかないようです。leftnav に「スマッシュ」せずにページの中央に記事を表示するにはどうすればよいですか? みんな、ありがとう。
CSS
/* CSS Document */
body{
background-color:#9F6;
}
section{
width:960px;
/*padding:15px;*/
}
header{
height:150px;
outline:#000 dotted;
}
nav{
position:relative;
outline:#000 dotted;
}
nav ul{
padding:15px;
}
nav ul li{
/* Moves the nav in a horizontal fashion */
display:inline;
}
nav ul li a{
list-style-type:none;
text-decoration:none;
text-transform:capitalize;
padding:15px;
}
nav ul li a:hover{
background-color:#F00;
color:#0FF;
}
#leftnav{
float:left;
width:160px;
outline:#000 dotted:
/*margin-right:15px; */
/*padding:15px;*/
/*padding-right:2cm;*/
}
#rightnav{
float:right;
width:160px;
outline:#000 dotted:
}
aside, article{
min-height: 550px;
/*background-color: #F96;*/
outline:#000 dotted;
/*padding: 1px;*/
}
article{
width:750px;
/*margin-left:15px;*/
/*padding-left:65px;*/
}
footer{
width:960px;
outline:#000 dotted;
margin-top:15px;
text-align:center;
}
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="another-css.css">
<title>Another Test</title>
</head>
<body>
<section>
<header>
<h3>This Is The Header</h3>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Cars</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</nav>
<aside id="leftnav">
aside left
</aside>
<aside id="rightnav">
aside right
</aside>
<article>
article
</article>
<footer>
Copyright 2013
</footer>
</section>
</body>
</html>