是否可以垂直對齊div元素？

我想有三個獨立的垂直列，有沒有一種方法可以更改我的代碼，使列垂直而不是水平（就像他們現在）。是否可以垂直對齊div元素？

.cols { 
 
    font-weight: bold; 
 
    min-height: 50%; 
 
    min-width: 90%; 
 
    background: #000000; 
 
    margin-bottom: 15px; 
 
    display: table; 
 
    table-layout: fixed; 
 
} 
 
.cols div { 
 
    position: relative; 
 
    background: #232323; 
 
} 
 
.col { 
 
    display: table-cell; 
 
}

<div class="cols"> 
 
    <div class="col">Column 1</div> 
 
    <div class="col">Column 2</div> 
 
    <div class="col">Column 3</div> 
 
</div>

目前我有三個水平方框，外部容器的拉伸，我想了三盒均勻地設置了垂直列，如果是有道理的。

來源

2016-06-07 Twtheo

列的列數和訂單從左至右。如果你需要行，使用'display：table-row;'。或者根本不要爲'divs'重新聲明'display'屬性。 –

這實際上很奇怪，因爲在我的網頁上單元格被拆分，所以它們都是它們自己的行（一個在另一個之上）。但我的代碼片段並排顯示，這就是我想要的，讓我看看這個 – Twtheo

@SergeyKhalitov我在哪裏聲明顯示一個div？ – Twtheo

如果我明白你的意思，這是可以使用flex完成：

.cols { 
 
    min-height: 50%; 
 
    min-width: 90%; 
 
    background: #000000; 
 
    margin-bottom: 15px; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-flex-direction: column; 
 
    flex-direction: column; 
 
} 
 
.cols div { 
 
    background: #232323; 
 
    color: #fff; 
 
}

<div class="cols"> 
 
    <div class="col">Column 1</div> 
 
    <div class="col">Column 2</div> 
 
    <div class="col">Column 3</div> 
 
</div>

來源

2016-06-07 18:29:33

我試圖編寫時出錯 display：-webkit-flex; display：flex; – Twtheo

@Twtheo什麼錯誤？ –

「分析值'display'時出錯」。你改變了.col類嗎？ – Twtheo

是否可以垂直對齊div元素？

回答

相關問題