html - 三个div彼此相邻

Question

一段时间以来，我一直在尝试将三个 div 放在一起。但是应该在右边的那个并没有放在其他旁边。它有点跳下来。如下图所示。

代码如下:

#left {
    margin: auto;
    width: 30%;
    padding: 10px;
    float: left;
    height: auto;
}
#middle {
    margin: auto;
    width: 30%;
    padding: 10px;
    height: auto;
}
#right {
    margin: auto;
    width: 30%;
    padding: 10px;
    float: right;
    height: auto;
}

Answer 1

我建议使用 display:flex;并使用 flex-direction: row | row-reverse | column | column-reverse; 指定您想要的 flex 方向

您还应该将这些 CSS 属性附加到 <div></div>其中包含所有三个 div。

您可以在此处找到所有相关信息: https://css-tricks.com/snippets/css/a-guide-to-flexbox/