我试图让部分的div彼此相邻（水平）。但是，当我使用flex作为显示时，它们消失了。我正在使用容器div作为容器，并使用具有2个部分的section div。然后，每个部分都有块。我一直在尝试使这些部分并排显示，但是它们始终彼此重叠，当我尝试将显示更改为可弯曲或试图使其浮动时，它们只是变得不可见。任何想法？
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
font-family: sans-serif;
}
body {
background: #59537E;
}
#navbar {
background: #382F6A;
display: flex;
justify-content: space-between;
padding: 25px;
position: sticky;
top: 0;
box-shadow: 0 10px 10px -2px rgba(0, 0, 0, .3);
height: 70px;
}
nav ul li {
display: inline-block;
font-size: 16px;
margin-left: 20px;
color: #D2CBF5;
font-weight: bold;
margin-top: 7px;
cursor: pointer;
}
nav ul li:hover {
color: white;
}
#links {
display: flex;
}
#links img {
margin-right: 13px;
}
.container {
height: 1000px;
margin: auto;
max-width: 1150px;
}
.row {
margin: 40px 20px 25px 20px;
display: flex;
justify-content: center;
}
.row a {
text-decoration: none;
color: white;
font-size: 20px;
}
.btn {
margin: 0px 20px;
border: 2px white solid;
padding: 7px 25px;
border-radius: 20px;
font-weight: bold;
}
.btn:hover {
background: white;
color: #59537E;
border-color: blanchedalmond;
}
.sections {
display: flex;
}
.section {
margin-top: 100px;
max-width: 500px;
}
.block {
background: white;
border-radius: 10px;
height: 300px;
margin-top: 25px;
display: block;
}<nav id="navbar">
<div id="links">
<img src="IMGS/logo-badge.svg" width="32px" height="32px">
<ul>
<li>Home</li>
<li>Courses</li>
<li>Groups</li>
<li>Calender</li>
<li>Support</li>
<li>BAU</li>
<li>BAUGO</li>
<li>BAU Library</li>
</ul>
</div>
<div id="profile">
<ul>
<li>Noti</li>
<li>Msgs</li>
<li>Khaled</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<a href="" class="btn">Courses</a>
<a href="" class="btn">Updates</a>
</div>
<div class="sections">
<div class="section">
<div class="block">
</div>
<div class="block">
</div>
</div>
<div class="section">
<div class="block">
</div>
<div class="block">
</div>
</div>
</div>
</div>您需要给宽度.section。喜欢
.section {
margin-top: 100px;
width: 100%;
max-width: 500px;
}
Codepen：https：//codepen.io/manaskhandelwal1/pen/mdrGVLd
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句