Html 我需要将两个div并排放置，就像它们将显示为单个div一样

我有一个粉红色的容器，里面有两个div，红色和绿色与display并排放置：inline block；css中的规则。我需要这两个div都采用50%的宽度，以便它们显示为单个div。但是，当我将宽度设置为50%时，红色div下方的绿色跳转。当我将宽度设置为49%时，它跳转到同一行，但中间有间隙，这不是我想要的，一些身体帮助

我需要它们像一个div一样排列在一起。 我会把我的代码笔链接放在这里。。。 HTML

---

这是一个已知的问题，

内联块

元素之间的空白会导致出现边距。看看这个示例（已修复）

.container{
宽度：800px；
高度：800px；
背景颜色：粉红色；
}
.盒子{
显示：内联块；
宽度：50%；
高度：50px；
背景色：红色；
框大小：边框框；
保证金：0；
填充：0；
}
.框：第n个类型（2）{
背景颜色：绿色；
}

切换到浮动，ala

内联块

可能导致奇数间隔，需要进一步解决

---

使用浮动时，您可以简单地实现所需的效果，您可能需要调查在包装浮动元素的容器上使用“clearfix”的情况。

我们的代码的问题是HTML检测到容器中box元素之间的空白，因此容器中似乎没有足够的空间容纳两个50%宽度的div。-将它们设置为48%或更小，u将看到它们将适合一条线

一种解决方案可以是：

.container{
宽度：800px；
高度：800px；
背景颜色：粉红色；
显示：内联块；
字号：0；
}
.盒子{
显示：内联块；
宽度：50%；
高度：50px；
背景色：红色；
}
.box2{
显示：内联块；
宽度：50%；
高度：50px；
背景颜色：绿色；
}

---

将

字体大小：0

添加到父元素

.container

.container{
宽度：800px；
高度：800px；
背景颜色：粉红色；
字号：0；
}
.盒子{
显示：内联块；
宽度：50%；
高度：50px；
背景色：红色；
}
.box2{
显示：内联块；
宽度：50%；
高度：50px；
背景颜色：绿色；
}

<div class="container">
   <div class="box">
   </div> 
   <div class="box2">
   </div> 
</div>

.container{
width:800px;
height:800px;
background-color:pink;
}
.box{
display:inline-block;
width:50%;
height:50px;
background-color:red;
}
.box2{
display:inline-block;
width:50%;
height:50px;
background-color:green;
}