1

私の目標は、記事を 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>
4

3 に答える 3

6 
margin-left: auto;
margin-right: auto;

記事で上記のコードを使用しようとしましたか

于 2013-10-12T17:09:34.820 に答える
3

margin:0 auto;記事クラスに設定:

article{
 width:600px;    /*   decreased to 600px  */
    margin:0 auto;          /* added  */
 /*margin-left:15px;*/
 /*padding-left:65px;*/
}

jsfiddle

于 2013-10-12T17:09:27.683 に答える