本文目錄導讀：

1. 使用CSS的display屬性
2. 使用CSS的浮動屬性
3. 使用CSS的Flexbox布局

CSS技巧：如何使兩個div元素獨立排列

在網(wǎng)頁設計中，我們經(jīng)常需要將多個div元素進行布局控制，有時我們希望兩個div元素不要排列在同一行，這可以通過CSS的多種方法實現(xiàn)，下面介紹幾種常用的方法。

使用CSS的display屬性

通過設置div的display屬性為block，可以讓div元素以塊級元素的形式展現(xiàn)，這樣它們會自動排列在各自獨立的行內(nèi)。

.div1 {
    display: block;
}
.div2 {
    display: block;
}

使用CSS的浮動屬性

通過給div元素添加浮動屬性，也可以實現(xiàn)兩個div元素不在同一行的效果，我們可以使用float屬性將div元素向左或向右浮動，這樣，它們就不會在同一行內(nèi)顯示。

.div1 {
    float: left;
}
.div2 {
    float: right; /* 或者設置為 'left'，取決于你的布局需求 */
}

使用CSS的Flexbox布局

Flexbox是一種強大的布局工具，可以輕松實現(xiàn)復雜的布局需求，通過設置父元素的display屬性為flex，并使用flex-direction屬性控制子元素的排列方向，可以讓兩個div元素不在同一行。

.parent {
    display: flex;
    flex-direction: column; /* 子元素垂直排列 */
}

三種方法都可以實現(xiàn)兩個div元素不在同一行的效果，在實際應用中，可以根據(jù)具體的布局需求和場景選擇合適的方法，這些方法也可以結(jié)合其他CSS屬性和技巧進行更復雜的布局控制。