0

我有这个练习,我试图将主要内容(内容 1 和内容 2)移动到两个侧边菜单的中间。目前,主要内容流向两个菜单。有人可以告诉我如何正确设置吗?谢谢你。


样式.css

        body {
            color: #000305;
            background-image: url('images.jpg');
            font-size: 87.5%;
            font-family:Arial;
            line-height: 1.5;
            text-align:left;
        }

        a{
            text-decoration:none;
        }

        a:link, a:visited {
            color:#CEFC3F;  
        }

        a:hover, a:active{
            background-color:#CEFC3F;

        }

        .body{
            margin: 0 auto;
            width: 90%;
            clear:both; 
        }

        .mainHeader img{
            width: 100%;
            height:100px;
            margin:2% 0;
        }

        .mainHeader nav {
            background-color: #666;
            height: 40px;
            border-radius: 5px;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
        }

        .mainHeader nav ul {
            list-style:none;
            margin: 0 auto;
        }

        .mainHeader nav ul li{
            float:left;
            display:inline;

        }

        .mainHeader nav a:link, .mainHeader nav a:visited {
            color: #fff;
            display: inline-block;
            padding: 10px 25px;
            height: 20px;
        }

        .mainHeader nav a:hover, .mainHeader nav a:active,
        .mainHeader nav .active a:link, .mainHeader nav .active a:visited{
            background-color: #CEFC3F;
            text-shadow:none;
        }

        .mainHeader  nav ul li a{
            border-radius: 5px;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px; 
        }

        .mainContent{
            line-height:25px;
            border-radius: 5px;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;     
        }

        .content{
            width:50%;      

        }

        .subContent1{
            background-color:#FFF;
            border-radius: 5px;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            padding:3% 5%;
            margin-top:2%;
        }

        .subContent2{
            background-color:#FFF;
            border-radius: 5px;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            padding:3% 5%;
            margin-top:2%;
        }

        .leftNav{
            width:16%;
            float: left;
            background-color: #fff;
            border-radius: 5px;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px; 
            padding: 2% 3%;     
        }

        .rightNav{
            width:16%;
            float:right;    
            background-color:#FFF;
            border-radius: 5px;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px; 
            padding:2% 3%;          
        }

        .footer{
            width: 100%;
            float:left;
            border-radius: 5px;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            margin: 2% 0 2% 0;
            background-color: #666;
        }





  index.html
        <!DOCTYPE html>
        <html lang="en">

        <html>
            <head class="top_header">

                <meta charset="utf-8"/>
                <link rel="stylesheet" href="style.css" type="text/css"/>
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
            </head>
            <body class="body">
                <div class="mainHeader">            
                    <img src="Lighthouse.jpg"/>
                    <nav><ul>
                        <li class="active"><a href="#">My Account</a></li>
                        <li><a href="#">Settings</a></li>
                        <li><a href="#">Cart</a></li>
                    </ul></nav>
                    <div class="search_tab">
                        <div class="search_textbox">
                        </div>
                        <div class="search_button">
                        </div>
                    </div>
                </div>
                <div class="mmainContent">
                    <div class="content">
                        <div class="subContent1">
                            <h2>Content 1</h2>
                            <p>Here is a sub-content     Here is a sub-content Here is a sub-content Here is a sub-content 
                            Here is a sub-content Here is a sub-content Here is a sub-content Here is a sub-content 
                            Here is a sub-content Here is a sub-content 
                            </p>
                        </div>

                        <div class="subContent2">
                            <h2>Content 2</h2>              
                            <p> this is a paragraph this is a paragraph this is a paragraph this is a paragraph 
                            this is a paragraph this is a paragraph this is a paragraph this is a paragraph 
                            this is a paragraph this is a paragraph this is a paragraph this is a paragraph
                            </p>
                        </div>
                    </div>
                </div>
                <div class="leftNav">
                    <h2><a>Left Menu</a></h2>
                    <p>This is a left menu This is a left menu This is a left menu This is a left menu This is a left menu 
                    This is a left menu This is a left menu This is a left menu This is a left menu 
                    This is a left menu This is a left menu This is a left menu </p>
                </div>

                <div class="rightNav">
                    <h2><a>Right Menu</a></h2>
                    <p>This is a right menu This is a right menu This is a right menu This is a right menu This is a right menu 
                    This is a right menu This is a right menu This is a right menu This is a right menu 
                    This is a right menu This is a right menu This is a right menu This is a right menu 
                    </p>
                </div>
                <footer class="footer">
                    <p>All Right Reserved!</p>
                </footer>


            </body>
        </html>
4

4 回答 4

1

在 divclass content中给出margin-left: 25%. 并在 div 标签中Class leftnav给出margin-top: -30%. 对于rightnav给出margin-top:-30%;

于 2013-08-02T10:32:56.500 回答
1

我会更改您的 html 的顺序,以便左列位于内容之前。

然后我也会float:left;在内容上加上一个。

你可以在这里看到一个工作示例:

http://codepen.io/alexbaulch/pen/jfcul

于 2013-08-02T10:05:08.653 回答
0

您还需要浮动 mainContent 区域。

于 2013-08-02T10:02:50.263 回答
0

问题是.mainContent它只包含.contentdiv,并且您试图在它之后添加两个浮动菜单。在这个 jsfiddle 中,我将列移到.mainContent并浮动该.content区域:http: //jsfiddle.net/LmJ5e/

于 2013-08-02T10:10:21.380 回答