如何在 HTML/CSS 中將垂直列重新排列為水平列？-css教學-PHP中文網

如何在 HTML/CSS 中將垂直列重新排列為水平列？

Linda Hamilton

發布： 2024-11-13 15:14:02

原創

408 人瀏覽過

How to Rearrange Vertical Columns to Horizontal in HTML/CSS?

HTML/CSS 中的3 列版面配置

問題：

您有一個HT>問題：

您有一個HTML垂直排列三列的佈局：左、中、右。您希望使用 CSS 重新水平排列這些列，而不改變 HTML 結構。

解決方案：

.column-left { float: left; width: 33.333%; }
.column-right { float: right; width: 33.333%; }
.column-center { display: inline-block; width: 33.333%; }

登入後複製

要實現水平列排列，您可以使用以下 CSS 屬性：

浮動：左；將左列與其容器的左邊緣對齊。
float: right;將右列與其容器的右邊緣對齊。
display: inline-block;將中心列與其他欄位對齊，消除區塊級元素時可能出現的空白。

width 屬性將每列的寬度設定為容器寬度的三分之一.

為了獲得更大的靈活性，您可以透過指派列*類別（例如、第二列、第三列）。
使用column-offset-*類別將偏移量套用到列，讓您可以控制它們之間的間距。

利用column-inset -* 在容器內插入列的類，進一步自訂佈局。

以上是如何在 HTML/CSS 中將垂直列重新排列為水平列？的詳細內容。更多資訊請關注PHP中文網其他相關文章！