css 如何使可滚动的主要内容位于固定侧栏的旁边,而不是后面?

gojuced7  于 2022-11-26  发布在  其他
关注(0)|答案(1)|浏览(105)

我正在为我的学校项目做一个新闻网站。我有一个滚动时隐藏的标志横幅,之后有导航栏和侧边栏,滚动后会粘在顶部。但主要内容显示在侧边栏之后,而不是它旁边。侧边栏是固定的,但内容是可滚动的
超文本标记语言

<div class="logo">
            <img src="images/logo.png" alt="logo">
        </div>
 
        <div id="topnav" class="topnav">
                <a href="index.html" class="active" >Home</a></li> <!-- selected nav bar -->                
                <a href="./html/contact.html">Contact Us</a></li>
                <a href="./html/stats.html">Stats</a></li>
                <a href="./html/login.html">Login</a></li>
        </div>
    <div class="sidebar">                
        <table class="match"  >               
              
        </table>
        <table class="match"  > 
                <tr>
                    <td class="teamA"><img src="images/flags/saudiarabia.png" class="crest"></td>
                    <td class="scoreA">210/7 <br>(20)</td>
                </tr>
                <tr>
                    <td class="teamB"><img src="images/flags/portugal.png" class="crest" ></td>
                    <td class="scoreB">205/10 <br>(18)</td>                   
                </tr>
        </table>
        
          
    </div>
    <div class="main">
        <article>
                <h2>Microsoft Edge</h2>
                <img src="images/news/kuldeep.webp"></img>
                <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
                
        </article>
    </div>

'css

.logo {

    height: 200px;
    display: flex;
    justify-content: center;

}
\#topnav {  
background-color:#0c5d9c;  
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 9999;
text-align: center;  
}
.topnav a {
color: #f2f2f2;
text-align: center;
padding: 14px 14px 14px 14px;
text-decoration: none;
font-size: 17px;
display: inline-block;
}

.sidebar {  
width: 250px;  
height: 100%;
position: -webkit-sticky;
position: sticky;
top: 60px;
background-color: red;
}

.main{
margin-left: 250px;
padding-left:  10px;
box-shadow: #313131;
padding-right: 10px;
}

我尝试了很多方法,比如在侧边栏和主要内容上使用 Package 器。但是没有成功。

1bqhqjot

1bqhqjot1#

请检查以下工作片段
第一个
在这里,我已经将边栏和主div Package 到父div中。从主div中删除了margin-left: 250px,并添加了以下css:

.content {
    display: flex;
    flex-wrap: nowrap;
}

相关问题