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: left;

两个div。

工作示例here

Answer 2

您需要浮动#privset div并调整框尺寸。

此外，使用50vw会导致问题，因为broswers对整个宽度中是否包含任何滚动条有不同的解释。使用50％代替跨浏览器支持。

＆＃13;

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
#usersearch {
  border-bottom: medium solid;
  width: 100%;
  height: 40vh;
}
#privset {
  border-right: medium solid;
  position: relative;
  width: 50%;
  height: 100vh;
  float: left;
}
#privrules {
  float: right;
  position: relative;
  width: 50%;
  height: 100vh;
}

＆＃13;

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

＆＃13;

Answer 3

并排坐着的所有元素都应该浮动。此外，如果您使用边框和/或填充，则应设置box-sizing: border-box。

请参阅此工作示例：https://jsfiddle.net/lewster32/3zb7xgh2/

如何将divs彼此相邻？

3 个答案: