使用 float 的内联 DIV

div 是块级元素，即它占据整个页面宽度，并且兄弟姐妹一个接一个地放置在另一个之下，而不管它们的宽度如何。

<div>
    <p>This is DIV 1</p>
</div>
<div>
    <p>This is DIV 2</p>
</div>

以下代码的输出将是

我们可以通过向 div 添加 float css 属性来使它们在线。

HTML：

<div class="outer-div">
    <div class="inner-div1">
        <p>This is DIV 1</p>
    </div>
    <div class="inner-div2">
        <p>This is DIV 2</p>
    </div>
</div>

CSS

.inner-div1 {
    width: 50%;
    margin-right:0px;
    float:left;
    background : #337ab7;
    padding:50px 0px;
}
 
.inner-div2 {
    width: 50%;
    margin-right:0px;
    float:left;
    background : #dd2c00;
    padding:50px 0px;
}
 
p {
    text-align:center;
}

Codepen 链接