我试图将两个 div 放在一起，并让它们都填满屏幕的宽度。理想情况下，我希望它看起来像this https://i.stack.imgur.com/RVxb2.png.
我自己尝试过这样做，但是 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 的填充和边框大小造成的，但我似乎无法修复它。任何帮助将非常感激！ :)
只需使用另一个容纳 div 的容器并使用 display:flex
要使间隙使用 justify-content: space- Between 并减少框的宽度。
<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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
