使用 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 連結