CSS中，將列轉換為橫的方法有多種，但常見的是使用CSS的Flex布局或Grid布局。

Flex布局是一種靈活的布局方式，可以輕松地創(chuàng)建列到行的轉換，通過給父元素設置display: flex;屬性，并將其子元素設置為flex: 1;，可以創(chuàng)建一個等寬的橫行布局，如果需要調整子元素的寬度，可以通過設置flex-basis或flex-grow來調整。

以下代碼將創(chuàng)建一個包含三個等寬子元素的橫行布局：

.container {
  display: flex;
}
.item {
  flex: 1;
}

HTML結構如下：

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

如果需要調整子元素的寬度，可以通過設置flex-basis或flex-grow來調整，以下代碼將創(chuàng)建一個包含三個子元素的橫行布局，其中***個子元素的寬度為50px，第二個子元素的寬度為100px，第三個子元素的寬度為150px：

.container {
  display: flex;
}
.item {
  flex: 1;
}
.item:nth-child(1) {
  flex-basis: 50px;
}
.item:nth-child(2) {
  flex-basis: 100px;
}
.item:nth-child(3) {
  flex-basis: 150px;
}

另一種方法是使用CSS的Grid布局，通過給父元素設置display: grid;屬性，并指定每行每列的數(shù)量和寬度，可以創(chuàng)建一個橫行布局，以下代碼將創(chuàng)建一個包含三個等寬子元素的橫行布局：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}