如何将两个div彼此相邻放置并占据屏幕的整个宽度？

Question

我正在尝试将两个div相邻放置，并使它们都填满屏幕的宽度。 理想情况下，我希望它看起来像这样。

我自己尝试过执行此操作，但是div的宽度最终太大，显示为两行。

这是我正在使用的代码：

<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>

我认为问题是由于div的填充和边框大小引起的，但我似乎无法解决。 任何帮助将非常感激！ :)

Answer 1

只需使用另一个保存div的容器并使用display：flex

要使间隙使用正当内容：在空格之间减小框的宽度。

<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>

Answer 2

 .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>

如何将两个div彼此相邻放置并占据屏幕的整个宽度？

问题描述

2 个解决方案

解决方案1
0 2019-06-08 20:10:51

解决方案2
0 2019-06-08 20:46:34

如何将两个div彼此相邻放置并占据屏幕的整个宽度？

问题描述

2 个解决方案

解决方案1 0 2019-06-08 20:10:51

解决方案2 0 2019-06-08 20:46:34

解决方案1
0 2019-06-08 20:10:51

解决方案2
0 2019-06-08 20:46:34