如何将div放置在彼此相邻的位置？
如何将div放置在彼此相邻的位置？
提问于 2016-02-15 23:36:00
我正在创建一个由3个div组成的简单管理控制台。一个div (usersearch)延伸到整个页面的宽度，而剩下的两个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>回答 3
Stack Overflow用户
发布于 2016-02-15 23:47:51
您使用的css边框占用1个像素或2个像素，因此将每个边框设置为
width: 50vh;宽度太大了。要么将其设置为49vh，要么取消边界。
此外，如果您希望2个div彼此相邻浮动，请设置
float: left;对于这两个div。
工作示例here
Stack Overflow用户
发布于 2016-02-15 23:48:01
您需要浮动#privset div并根据框的大小进行调整。
此外，使用50vw可能会导致问题，因为浏览器对滚动条是否包含在总宽度中有不同的解释。对于跨浏览器支持，请使用50%。
* {
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;
}<div id="usersearch">Customer Information</div>
<div id="privset">Priv set</div>
<div id="privrules">Priv rules</div>
Stack Overflow用户
发布于 2016-02-15 23:51:39
所有并排的元素都应该是浮动的。此外，如果您使用边框和/或填充，则应设置box-sizing: border-box。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35413272
复制相关文章
相似问题
腾讯云开发者
