[英]Why are my divs disappearing when I use display: flex?
我正在尝试使部分div 彼此相邻（水平）。 但是，当我使用 flex 作为显示器时，它们会消失。 我使用容器 div 作为容器和具有 2 个部分的部分 div。 然后每个部分都有块。 我一直试图让这些部分并排显示，但它们一直在彼此之上，当我尝试将显示更改为弯曲或尝试浮动它们时，它们只是 go 不可见。 任何想法？
* { 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>
.sections {
display: flex;
}
.section {
margin-top: 100px;
max-width: 500px;
flex: 1; /* You need this property */
}
display: flex表示容器根据 flexbox model 定位其子级，但您仍然必须通过将其flex设置为1 （或任何其他数字，在这种情况下，空间将分布在孩子与其价值成正比）。
您需要为.section提供宽度。 喜欢
.section {
margin-top: 100px;
width: 100%;
max-width: 500px;
}
我希望这是你所期待的。
在您的 CSS 中添加这些更改以实现预期结果：
.sections {
display: flex;
margin: 0px 5px;
justify-content: space-around;
}
.section {
margin-top: 100px;
flex-grow:1;
max-width: 500px;
}
* { 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, 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; margin: 0px 5px; justify-content: space-around; }.section { margin-top: 100px; flex-grow:1; max-width: 500px; }.block { background: white; border-radius: 10px; height: 300px; margin-top: 25px; display: block; }
<.DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <title>itslearning</title> </head> <body> <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> </body> </html>
为什么在使用display：inline-block;时div的顺序会更改？
[英]Why does the order of my divs change when I use display: inline-block;?
当我添加范围约束时，为什么我的 openlayers map 会消失？
[英]Why is my openlayers map disappearing when I add an extent constraint?
我希望我的 div 的边界完全重叠，但是当我将它们与 flex 对齐时会变得奇怪
[英]I want my borders of my divs to overlap completely, but get weird staggering when I align them with flex
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.