如何将两个div彼此相邻放置并占据屏幕的整个宽度？
[英]How can I put two divs next to each other and have it take up the whole width of the screen?
问题描述
I'm trying to put two divs next to each other and have them both fill up the width of the screen. 
我正在尝试将两个div相邻放置，并使它们都填满屏幕的宽度。 Ideally, I would want it to look like this . 理想情况下，我希望它看起来像这样 。
I have tried to do this myself, but the width of the divs end up being too big and show up on two line. 我自己尝试过执行此操作，但是div的宽度最终太大，显示为两行。
Here's the code I'm using: 这是我正在使用的代码：
<head>
<style>
.box {
width: 50%;
background-color: #202020;
border: 2px solid #484848;
border-radius: 10px;
padding: 5px;
margin-bottom: 5px;
}
p {
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
color: #fff;
margin: 0px;
}
</style>
</head>
<body>
<div class="box" style="float:right;">
<p>Test</p>
</div>
<div class="box" style="float:left;">
<p>Test</p>
</div>
</body>
I think the issue is due to the padding and border sizes of the div, but I can not seem to fix it. 我认为问题是由于div的填充和边框大小引起的，但我似乎无法解决。 Any help would be much appreciated! 任何帮助将非常感激！ :) :)
2 个解决方案
解决方案1
0 2019-06-08 20:10:51
Simply use another container which holds your divs and use display:flex 只需使用另一个保存div的容器并使用display：flex
To make the gap use justify-content: space-between and reduce width of box. 要使间隙使用正当内容：在空格之间减小框的宽度。
<head>
<style>
.box {
width: 48%;
background-color: #202020;
border: 2px solid #484848;
border-radius: 10px;
padding: 5px;
margin-bottom: 5px;
}
.wrapper {
display:flex;
justify-content:space-between;
width:100vw;
}
p {
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
color: #fff;
margin: 0px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box" style="float:right;">
<p>Test</p>
</div>
<div class="box" style="float:left;">
<p>Test</p>
</div>
</div>
</body>
解决方案2
0 2019-06-08 20:46:34
.container { display: flex; width: 100%; height: 100px; } .twin { margin:8px; height: inherit; border: 1px solid red; width: 50%; }
<html> <head> </head> <body> <div class="container"> <div class="twin"> </div> <div class="twin"> </div> </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.