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

标签 css sidebar

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

我是 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/

上一篇：CSS:在 Internet Explorer 中压缩列加载

下一篇：jquery - css 动画 - 模糊的幻灯片从底部显示

相关文章：

html - 实现 div 不并排显示

google-apps-script - GAS是否可以立即替换getActiveDocument()。getSelection()？

html - 修复了侧边栏滚动无法正常工作的问题

html - 如何显示句柄以向用户指示面板可调整大小？

html - 父div溢出隐藏时如何设置框阴影底部？

c# - 如何使用 HTMLTextWriter 加载 CSS 文件

javascript - 如何向切换添加过渡？

javascript - 修复侧边栏上的错误并平滑滚动

不使用 float 或边距调整的 CSS 定位

css - iPad 网络编程的资源？

©2024 IT工具网  联系我们