如何将两个div放在同一行

Question

我很困惑如何将两个div带入同一行。 我为每个人使用了float:left和float:right一个，并且它们被包含为div id的两个不同div class。在课堂上也使用了display:inline。 请对此问题有任何想法。

Answer 1

您可以将显示属性更改为inline或inline-block。

例如：

<div class="example">One</div><div class="example">Two</div>

使用

.example {
    display: inline;
}

Answer 2

为他们两个尝试float: left

Answer 3

有几种方法可以实现这一点，我在a sample page上详细介绍了其中的七种方法。 TL; DR：

• cse() float s（@ vladkras＆＃39; answer）
• 使用div（@ Sohnee的答案）
• 在父
上使用Flexbox：display: inline-block;
• 使用负边距来移动第二个display: flex
• 在父级上使用div，在子级上使用display: table
• 玩display: table-cell
• 并且，最新且在许多情况下是最佳解决方案，CSS Grid Layout：position: absolute在父级上。