Question

我试图垂直对齐两个div，我知道如何做到这一点。但是另一个问题即将到来，当我把第二个div放在它下面时，上面的div（＆＃34; top-bar＆＃34;）被削减了一半，我没有理由。我应该使用position：absolute来解决这个问题吗？我尽量避免使用它。谢谢！

＆＃13;

body {
    margin: 0;
    padding: 0;
    background-color: #EFEFEF;
    font-family: sans-serif;
}

.homepage-window {
    height: 100vh;
    display: flex;
}

.nav-bar {
    width: 18%;
    background-color: #2E3E4E;
}

.top-bar {
    height: 8%;
    width: 100%;
    background-color: white;
    border-bottom: 0.5px solid lightgrey;
}

.bottom-bar {
    margin-top: 20%;
    height: 8%;
    width: 100%;
    background-color: white;
    border-bottom: 0.5px solid lightgrey;
}
/*border-top: 0.5px solid lightgrey;*/

＆＃13;

<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="CSS/Homepage.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<head>
<title>Cold-Ops Homepage</title>
</head>
<body>
<div class="homepage-window">
    <div class="nav-bar">

    </div>
    <div class="top-bar">

    </div>
    <div class="bottom-bar">

    </div>
</div>
</body>
</html>

＆＃13;

Answer 1

将顶栏和底栏div包裹在另一个宽度为100％的包装div中;

<div style="width: 100%;">
  <div class="top-bar">

   </div>
   <div class="bottom-bar">

   </div>
</div>

在你的情况下，所有3个div都放在一个flex容器中，它将它们对齐在同一行。这就是为什么你需要将顶栏和底栏div保留在另一个div容器中。

＆＃13;

 
body {
margin: 0;
padding: 0;
background-color: #EFEFEF;
font-family: sans-serif;
}

.homepage-window {
height: 100vh;
display: flex;
}

.nav-bar {
width: 18%;
background-color: #2E3E4E;
}

.top-bar {
height: 8%;
width: 100%;
background-color: white;
border-bottom: 0.5px solid lightgrey;
}

.bottom-bar {
margin-top: 20%;
height: 8%;
width: 100%;
background-color: white;
border-bottom: 0.5px solid lightgrey;
}

＆＃13;

<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="CSS/Homepage.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<head>
<title>Cold-Ops Homepage</title>
</head>
<body>
<div class="homepage-window">
<div class="nav-bar">

</div>
<div style="width: 100%;">
    <div class="top-bar">

    </div>
    <div class="bottom-bar">

    </div>
</div>
</div>
</body>
</html>

＆＃13;

如何将两个div对齐？（顶级div被削减一半）

1 个答案:

如何将两个div对齐？ （顶级div被削减一半）

1 个答案:

如何将两个div对齐？（顶级div被削减一半）