Html 如何在1个div内并排放置2个div并占据页面宽度？

你好，我正试图让我的2个div占据我所有的页面；并排成一排

这是我的密码。

你好
你好

我试过把

宽度：50%

---

在两个#about1和#about2上，但这会使它们相互重叠。

尝试将此添加到CSS文档中：

#about1,
#about2 {
    display: inline;
}

---

应用CSS

display:inlineblock

应该可以做到这一点。

它们彼此位于下方，因为它们是元素。你可以做两件事来解决这个问题

float

将它们向左或向右移动，或者

显示：内联

/

显示：内联块

使它们并排排列

---

就我个人而言，我更喜欢浮动元素，因为在这个

中，填充包含在宽度中。（5%x2）

尝试：

width: 40%;

---

嗯。。。5%的填充是问题所在（在小提琴中），请移除填充或将宽度调整为40%。

首先，您需要将主

设置为相对定位块：

#about {
    position: relative;
}

然后，将内部div定位为绝对定位块：

#about1 {
    position: absolute;
    left: 0;
    width: 50%;
}
#about2 {
    position: absolute;
    right: 0;
    width: 50%;
}

---

另一种方法是使用@hobenkr的技巧；-）

或添加

框大小：边框框。我在所有的项目中都有这样的想法。@maghtypork以前从未听说过，非常好的建议，谢谢。我真不敢相信我竟然没有想到这一点。谢谢你的提醒和回答！非常感谢！
#about1 {
    position: absolute;
    left: 0;
    width: 50%;
}
#about2 {
    position: absolute;
    right: 0;
    width: 50%;
}