HTML中的div元素是一個非常常用的元素,使用它可以將一個文檔分割成多個邏輯部分,從而更加方便的控制和管理文檔內容。
這是一個div元素
這是另一個div元素
在實際開發中,我們會經常使用到橫向的div元素,通過將多個div元素水平排列,可以方便地呈現多個相關的內容,增強網頁的易讀性。
左邊的div
右邊的div
flex布局是一個非常常用的在橫向排列中使用的布局方式,通過設置div元素的display:flex屬性后,內部元素就可以實現在同一行橫向排列的效果。
在上述示例中,我們創建了一個橫向排列的布局,左側的div元素占據整個布局的25%寬度,而右側的div元素占據了布局的75%寬度。
如果需要在橫向排列的div元素之間加入間距,可以在每個div元素之間增加margin屬性,像下面這樣:
左邊的div
右邊的div
在每個div元素之間增加了10px的間距,這樣在呈現多個相關的內容時,可以讓頁面更加明了、美觀。