Question

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

我自己尝试过执行此操作，但是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 个答案: