html - 如何将 div 彼此相邻放置？

Question

我正在创建一个由 3 个 div 组成的简单管理控制台。一个 div (usersearch) 扩展到页面的整个宽度，而其余 2 个 div (privset、privrules) 必须以 50:50 的比例相邻。

加载页面时，只有一个 div 显示，而另一个被推到其他地方。

<style>
body {
padding:0%;
margin:0%;
overflow: hidden;
}

header {
background-color:black;
color:white;
text-align:center;
padding:5px; 
}

#usersearch {

border-bottom: medium solid;
position: relative;
width: 100%;
height: 40vh;
}
#privset{

border-right: medium solid;
position: relative;
width: 50vw;
height: 100vh;

}

#privrules{
float:right;
position: relative;
width: 50vw;
height: 100vh;


}

footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
position: absolute;
bottom:0;
left:0;
right:0;
}
</style>

下面的 HTML

<div id="usersearch">Customer Information</div>
<div id="privset">Priv set</div>
<div id="privrules">Priv rules</div>

Answer 1

您使用的 css 边框占用一个或 2 个像素，因此将每个边框设置为

width: 50vh;

宽度太大了。要么将它们设置为 49vh，要么去掉边界。

此外，如果您希望 2 个 div 彼此相邻 float ，请设置

float: left;

对于两个 div。

工作示例 here