Html 为什么内联块不使div内联？

我想用inline block创建一个inline div，但它不起作用，它要么将下面两个div中的一个变为上面两个div中的一个

#左边的div{
背景色：#464886；
宽度：200px；
高度：600px；
填充：10px；
边框：10px双色#2c2d54；
保证金：5px；
}
#右边的大div{
背景色：#AAABB8；
宽度：600px；
高度：600px；
显示：内联块；
保证金：5px；
}

---

使用网格或FlexBox会更好。在这种情况下，FlexBox将“更容易”和“更短”。您的主要问题是，两个div框的高度不同。由于采用了双边框，左侧div框的高度为

600px+（2x20px）=640px

。右侧div框的高度仅为600px，这会导致不同的线高度，因此会导致断线。接下来，最小宽度必须设置得足够大，以允许两个框相邻显示

在下面的代码片段中，我将两个框包装在一个包装器中，包装器的最小宽度足以让它们彼此相邻显示。然后我将它们改为

display:flex

由于上述边界，右框的高度设置为640px


.wrapper{
最小宽度：850px；
显示器：flex；
}
#左边的div{
背景色：#464886；
宽度：200px；
高度：600px；
填充：10px；
边框：10px双色#2c2d54；
保证金：5px；
}
#右边的大div{
背景色：#AAABB8；
宽度：600px；
高度：640px；
保证金：5px；
}
最终结果是什么？在我看来，使用flexbox或css网格会更好。