如何在 css 中創建 3 列布局？

Question

我一直在嘗試為我的程序制作一個復雜的 UI，我希望能夠在我的設計中使用 css 有 3 列。

這是目前我的代碼：

<div style="width:100px;">stuff</div>
<div style="width:100px;">stuff</div>
<div style="width:100px;">stuff</div>

但是，出於某種原因，這將顯示 3 行不同的內容。

我試圖改變一些事情，但它似乎根本不起作用

我只想在同一個塊上有 3 列。

Answer 1

如果你想在屏幕上有 3 個不同的區域，這樣做的有效方法是：

<style> .third { width: 33.33%; float: left; } </style>

<div class="third"> Something </div>
<div class="third"> Something </div>
<div class="third"> Something </div>

class="third"正在添加我制作的{}內的 css。 - 意味着每個 div 的width: 33.33% （屏幕的 1/3）和一個float: left ，它只會移動區域以便能夠移出正常的 CSS 和 HTML 范圍堆疊在頂部彼此的。

希望這可以幫助！ :)

Answer 2

有幾種方法可以完成你想要的。

方法一：浮動和寬度

分配單個列類

.column {    
    width: 33.3%;
    float: left;
}

用所述類標記三個 div

<div class="column">Column 1</div>
<div class="column">Column 2</div>
<div class="column">Column 3</div>

方法 2：內聯塊

有時浮動不是最好的選擇。 您還可以將 display 屬性設置為inline-block ，盡管這有時會在 div 之間留下不需要的間隙。

.column {    
    width: 33.3%;
    display: inline-block;
}

相同的 HTML 標記

<div class="column">Column 1</div>
<div class="column">Column 2</div>
<div class="column">Column 3</div>

方法三：彈性盒

CSS-tricks 的 Chris Coyier 認為 Flexbox：

Flexbox Layout (Flexible Box) 模塊（目前是 W3C Last Call 工作草案）旨在提供一種更有效的方式來布局、對齊和分配容器中項目之間的空間，即使它們的大小未知和/或動態（因此“彈性”一詞）。

.row {
    display: -ms-flex: // Vendor prefixes required for flexbox
    display: -webkit-flex; 
    display: flex:
}
.column {    
    width: 100px;
    display: -ms-inline-flex;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}

將父 div 添加到您的 HTML 標記中

<div class="row">
   <div class="column">Column 1</div>
   <div class="column">Column 2</div>
   <div class="column">Column 3</div>
</div>

flexbox 很酷的一點是你不需要使用設置的百分比來填充空間，它可以用justify-content: space-between;將你的列隔開justify-content: space-between;

使用 flexbox 可以深入研究更多內容。 Floats 非常簡單，但既然你提到了構建 UI，像 flexbox 這樣的東西會給你更多的工具來使用。

Answer 3

或者，您可以一次設置所有樣式，而無需提供 Jek 提到的課程。 如果您在 html 中使用樣式，則可以在標題中執行此操作：

<style> div{ width:100px } </style>

如果您使用外部樣式表，您也可以這樣做。 但是，如果您必須使用 class 和 id 以不同的方式設置 div 的樣式，那將是更好的選擇。 如果所有 div 的樣式都相同，只需設置標簽的樣式，在您的情況下為 div。