Html 把两个街区排成一行，避免它们互相站在一起

我已经试了一段时间了，想让这两个街区在同一条线上彼此分开，但都没有成功

你能帮我把这个弄清楚吗

这里

你好，你好吗
约翰·乔恩
国王和王后
我真的相信你是个胆小鬼，但请保持安静。
总区
{
颜色：红色；
宽度：350px；
字体大小：30px；
显示：内联块；
垂直对齐：顶部；
}
图书信息部{
垂直对齐：顶部；
显示：内联块；
宽度：300px；
垂直对齐：顶部；
}

---

虽然您在理论上有正确的想法（除了重复的

垂直对齐：top

），但您忽略了一个重要事实，即要并排放置的元素是

.bookinfo

和

.chapter

，不是

.bookinfo

和

#gros

在标记中有两个父div，分别是

.bookinfo

和

.chapter

。所以我假设你想把它们放在一边。因此

将

显示：内联块添加到
。章节

.chapter
{
    display: inline-block;
}

实际上，.chapter是一个div，我将其缩短到这里，它包含真实文件中的其他div，所以您的意思是，如果第二个div是另一个div的一部分，就不能将两个div放在一边？
.chapter
{
    display: inline-block;
}