css - 侧边栏没有移动到一边-6ren

css - 侧边栏没有移动到一边

转载作者：行者123 更新时间：2023-11-28 02:09:26

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

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

有人可以帮忙吗？

我尝试更改 float:left 和 float:right 但没有帮助。我还尝试更改或删除 margins 和 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>

最佳答案

Hre 是代码:

/*
    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;
    }

<!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>

我对 CSS 文件进行了更改，添加了 position 属性。如果你想了解更多关于 CSS 的这个属性，请访问 https://www.w3schools.com/cssref/pr_class_position.asp .希望对您有所帮助...

关于css - 侧边栏没有移动到一边，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48846197/

文章推荐： html - Typo3 sr_feuser_register 电子邮件模板无法使用 img 标签

文章推荐： javascript - 如果 window.location 通过变量以指定值结尾

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

css - 侧边栏没有移动到一边