两个div标签旁边

Question

你好也许已经通过了这个问题，但是当你需要并排放置两个DIVS时，我想要更清楚地知道这是如何工作的。你能用html和css显示它吗？提前谢谢！

Answer 1

您可以使用display: inline-block执行此操作。

dabblet

HTML：

<div id="left"></div>
<div id="right"></div>

CSS：

#left {
    display: inline-block;
    width: 100px;
    height: 50px;
    background-color: red;
}
#right {
    display: inline-block;
    width: 100px;
    height: 50px;
    background-color: blue;
}

---

如果您不希望将这两个div分隔的空格，请将您的HTML更改为：

dabblet

<div id="left"></div><div id="right"></div>

---

如果您希望每个div占据整个宽度的50％，请将width的{​​{1}}更改为div：

dabblet

50%