侧边栏没有移动到侧面

时间：2018-02-17 21:40:01

标签： css3 sidebar

很抱歉，如果这个问题已被提出，但我查看了所有答案，没有人帮助解决我的问题。

我是CSS的新手，我正试图将侧边栏移到一边，但没有任何效果。

有人可以帮忙吗？

我尝试更改float:left and float:right，但没有帮助。我也尝试更改或删除边距和 paddings 但是徒劳无功。

这是我的代码：

HTML：

    /*
    Theme Name: HTML5;
    Date: Feb 2018;
    Description: Learn Basic HTML;
    Version: 0.1;
    Author: MWQ;
    Author URL: www.example.com;
    */
    
    body{
        background-image: url('../img/bodybg.png');
        color: #000305;
        font-size: 90%;
        font-family: 'Arial', 'Lucida Sans Unicode';
        line-height: 1.5;
        text-align: left;
    }
    
    a{
        text-decoration: none;
    }
    a:link, a:visited{color:#e74c3c;}
    a:hover, a:active{color:#f58233;}
    
    .body{
        margin: 10px auto;
        width: 70%;
        clear: both;
    }
    
    /* ------- Main Header --------*/
    .mainheader img{
        width: 100%
    }
    
    
    .mainheader nav{
        background-color: #e74c3c;
        height: 40px;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
    }
    
    .mainheader nav ul{
        text-align: center;
        list-style: none;
        margin: 0 auto;
    }
    
    
    .mainheader nav ul li{
        display: inline;
    }
    
    .mainheader a:link, .mainheader a:visited{
        color: white;
        padding: 10px 40px;
        display: inline-block;
    } 
    
    .mainheader a:hover, .mainheader a:active{
        color: white;
        background-color: #f58233;
        text-shadow: 1px 1px #000;
    } 
    
    /* ------- Main Content --------*/
    
    .mainContent{
        width: 70%;
        float: left;
    }
    
    .top-content{
        background-color: #fff;
        padding: 3%;
        margin-top: 3%;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
    }
    
    .post-info{
        font-size: 90%;
        color: #999;
        font-style: italic;
        margin-top: -20px;
    }
    
    .post-content{
        display: inline;
    }
    
    .theSidebar{
        width: 22%;
        margin: 2% 0 0 2%;
        float: left;
        padding: 2%;
        background-color: #fff;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
    }
<!DOCTYPE html>
    <html>
        <!----------HEAD--------->
        <head>
            <title>HTML5 CSS3, & Responsive!</title>
            <link rel="stylesheet" type="text/css" href="./css/style.css">
            <meta charset=utf-8>
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
        </head>
        <!----------Body--------->
    
        <body class="body">
            <header class="mainheader">
                <img src="img/header.jpg"/>
                <nav><ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                 </ul></nav>
            </header>
            
            <div class="mainContent"></div>
            <section class="top-content">
                <header></header>
                <h2><a href="#">My Intro Text</a></h2>
                <footer>
                    <p class="post-info">Written By: MWQ</p>
                </footer>
                <article>
                    <p>
                        Eram admodum occaecat. Esse 
                        laboris expetendis, possumus nam amet ab ipsum concursionibus commodo velit 
                        doctrina ad sunt ne nostrud an aliqua, tamen admodum quo voluptatibus, consequat 
                        amet ne proident firmissimum te se quo anim nescius id quorum appellat an 
                        laborum.
                    </p>
                </article>
            </section>
            
            <section class="top-content">
                <header></header>
                <h2><a href="#">Video Tutorial</a></h2>
                <footer>
                    <p class="post-info">Written By: MWQ</p>
                </footer>
                <article>
                    <p>
                        Eram admodum occaecat. Esse 
                        laboris expetendis, possumus nam amet ab ipsum concursionibus commodo velit 
                        doctrina ad sunt ne nostrud an aliqua, tamen admodum quo voluptatibus, consequat 
                        amet ne proident firmissimum te se quo anim nescius id quorum appellat an 
                        laborum.
                    </p>
                </article>
            </section>
            
                <!----------Side Bar--------->
            <aside>
                <article class="theSidebar">
                <h1> First Side Bar </h1>
                <p>Eram admodum occaecat. Esse laboris expetendis, possumus nam amet ab ipsum oncursionibus commodo velit doctrina.
                </p>
                </article>
            </aside>
            
            
            <aside>
                <article class="theSidebar">
                <h1> Second Side Bar </h1>
                <p>Eram admodum occaecat. Esse laboris expetendis, possumus nam amet ab ipsum oncursionibus commodo velit doctrina.
                </p>
                </article>
            </aside>
            
            
            <aside>
                <article class="theSidebar">
                <h1> Third Side Bar </h1>
                <p>Eram admodum occaecat. Esse laboris expetendis, possumus nam amet ab ipsum oncursionibus commodo velit doctrina.
                </p>
                </article>
            </aside>
            
                <!----------Footer--------->
    
            <footer><p>Copy Rights</p></footer>
        </body>
    </html>

1 个答案:

答案 0 :(得分：0)

Hre代码：

＆＃13;
＆＃13; 
/*
    Theme Name: HTML5;
    Date: Feb 2018;
    Description: Learn Basic HTML;
    Version: 0.1;
    Author: MWQ;
    Author URL: www.example.com;
    */
    
    body{
        background-image: url('../img/bodybg.png');
        color: #000305;
        font-size: 90%;
        font-family: 'Arial', 'Lucida Sans Unicode';
        line-height: 1.5;
        text-align: left;
    }
    
    a{
        text-decoration: none;
    }
    a:link, a:visited{color:#e74c3c;}
    a:hover, a:active{color:#f58233;}
    
    .body{
        margin: 10px auto;
        width: 70%;
        clear: both;
    }
    
    /* ------- Main Header --------*/
    .mainheader img{
        width: 100%
    }
    
    
    .mainheader nav{
        background-color: #e74c3c;
        height: 40px;
        border-radius: 5px;
        z-index: 999;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
    }
    
    .mainheader nav ul{
        text-align: center;
        list-style: none;
        margin: 0 auto;
    }
    
    
    .mainheader nav ul li{
        display: inline;
    }
    
    .mainheader a:link, .mainheader a:visited{
        color: white;
        padding: 10px 40px;
        display: inline-block;
    } 
    
    .mainheader a:hover, .mainheader a:active{
        color: white;
        background-color: #f58233;
        text-shadow: 1px 1px #000;
    } 
    
    /* ------- Main Content --------*/
    
    .mainContent{
        width: 70%;
        position: absolute;
        right: 1px;
    }
    
    .top-content{
        background-color: #fff;
        padding: 3%;
        margin-top: 3%;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
    }
    
    .post-info{
        font-size: 90%;
        color: #999;
        font-style: italic;
        margin-top: -20px;
    }
    
    .post-content{
        display: inline;
    }
    
    .theSidebar{
        width: 22%;
        margin: 2% 0 0 2%;
        float: left;
        padding: 2%;
        background-color: #fff;
        border-radius: 5px;
        position: absolute;
        top: 20px;
        left: 20px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
    }
＆＃13; 
<!DOCTYPE html>
    <html>
        <!----------HEAD--------->
        <head>
            <title>HTML5 CSS3, & Responsive!</title>
            <link rel="stylesheet" type="text/css" href="./css/style.css">
            <meta charset=utf-8>
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
        </head>
        <!----------Body--------->
    
        <body class="body">
            <header class="mainheader">
                <img src="img/header.jpg"/>
                <nav><ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                 </ul></nav>
            </header>
            
            <div class="mainContent">
            <section class="top-content">
                <header></header>
                <h2><a href="#">My Intro Text</a></h2>
                <footer>
                    <p class="post-info">Written By: MWQ</p>
                </footer>
                <article>
                    <p>
                        Eram admodum occaecat. Esse 
                        laboris expetendis, possumus nam amet ab ipsum concursionibus commodo velit 
                        doctrina ad sunt ne nostrud an aliqua, tamen admodum quo voluptatibus, consequat 
                        amet ne proident firmissimum te se quo anim nescius id quorum appellat an 
                        laborum.
                    </p>
                </article>
            </section>
            
            <section class="top-content">
                <header></header>
                <h2><a href="#">Video Tutorial</a></h2>
                <footer>
                    <p class="post-info">Written By: MWQ</p>
                </footer>
                <article>
                    <p>
                        Eram admodum occaecat. Esse 
                        laboris expetendis, possumus nam amet ab ipsum concursionibus commodo velit 
                        doctrina ad sunt ne nostrud an aliqua, tamen admodum quo voluptatibus, consequat 
                        amet ne proident firmissimum te se quo anim nescius id quorum appellat an 
                        laborum.
                    </p>
                </article>
            </section>
            </div>
            
                <!----------Side Bar--------->
                <aside class="theSidebar">
            <aside>
                <article>
                <h1> First Side Bar </h1>
                <p>Eram admodum occaecat. Esse laboris expetendis, possumus nam amet ab ipsum oncursionibus commodo velit doctrina.
                </p>
                </article>
            </aside>
            
            
            <aside>
                <article >
                <h1> Second Side Bar </h1>
                <p>Eram admodum occaecat. Esse laboris expetendis, possumus nam amet ab ipsum oncursionibus commodo velit doctrina.
                </p>
                </article>
            </aside>
            
            
            <aside>
                <article >
                <h1> Third Side Bar </h1>
                <p>Eram admodum occaecat. Esse laboris expetendis, possumus nam amet ab ipsum oncursionibus commodo velit doctrina.
                </p>
                </article>
            </aside>
            </aside>
            
                <!----------Footer--------->
    
            <footer><p>Copy Rights</p></footer>
        </body>
    </html>
＆＃13;
＆＃13;
＆＃13;

我更改了CSS文件，添加了position属性。 如果您想了解有关CSS的此属性的更多信息，请访问https://www.w3schools.com/cssref/pr_class_position.asp。 希望它有所帮助...

相关问题
最新问题