的div顯示：表列有大小= 0

我試着用下面的代碼，但我什麼也看不到：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <style> 
     * { 
      margin: 0; 
     } 

     #table { 
      width: 100%; 
      height: 100%; 
      display: table; 
     } 

     #left { 
      width: 30%; 
      height: 100%; 
      display: table-column; 
     } 

     #right { 
      width: 70%; 
      height: 100%; 
      display: table-column; 
     } 

     #left_1, #left_2, #left_3, #right_1 { 
      display: table-cell; 
      text-align: center; 
      vertical-align: middle; 
     } 

     #left_1 { 
      background-color: green; 
      height: 40%; 
     } 

     #left_2 { 
      background-color: red; 
      height: 30%; 
     } 

     #left_3 { 
      background-color: lightgray; 
      height: 30%; 
     } 

     #right_1 { 
      background-color: black; 
      color: white; 
      height: 100%; 
     } 

    </style> 
</head> 
<body> 
<div id="table"> 
    <div id="left"> 
     <div id="left_1">left_1</div> 
     <div id="left_2">left_2</div> 
     <div id="left_3">left_3</div> 
    </div> 
    <div id="right"> 
     <div id="right_1">right_1</div> 
    </div> 
</div> 
</body> 
</html>

我能夠成功使用table-row，但我無法獲得table-column的工作。我究竟做錯了什麼？

來源

2017-01-19 stenci

你可以用Flexbox的得到它。

CSS中的必要的修改

#table { 
    display: flex; 
} 
#left, #right { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
} 
#left_1, #left_2, #left_3, #right_1 { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

更新的jsfiddle演示：https://jsfiddle.net/1mew6hqj/2/

Check this guide爲Flexbox的瞭解它是如何工作的。

來源

2017-01-19 06:04:24 pol

如何讓我的位圖中的文字在水平和垂直方向都居中？ – stenci

對齊內容flex有理由 - 內容，justify-items，align-content，align-items。我編輯了答案，檢查出來。 – pol

我將此標記爲答案，因爲即使我要求'display：table-column'，我認爲'flex'是一個有效的（或更好的）選擇。 – stenci

+1給Michael Coker，但這裏有另外一種可能性。

* { 
 
    margin: 0; 
 
} 
 
body, 
 
html { 
 
    height: 100%; 
 
} 
 
#table { 
 
    width: 100%; 
 
    max-height: 250px; 
 
    height: 100%; 
 
    display: block; 
 
    position: relative; 
 
} 
 
#left { 
 
    width: 30%; 
 
    height: 100%; 
 
    display: table; 
 
    float: left; 
 
} 
 
#right { 
 
    width: 70%; 
 
    height: 100%; 
 
    display: table; 
 
    float: left; 
 
} 
 

 
.row { display: table-row; } 
 

 
#left_1, 
 
#left_2, 
 
#left_3, 
 
#right_1 { 
 
    width: 100%; 
 
    display: table-cell; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
} 
 
#left_1 { 
 
    background-color: green; 
 
    height: 40%; 
 
} 
 
#left_2 { 
 
    background-color: red; 
 
    height: 30%; 
 
} 
 
#left_3 { 
 
    background-color: lightgray; 
 
    height: 30%; 
 
} 
 
#right_1 { 
 
    background-color: black; 
 
    color: white; 
 
    height: 100%; 
 
}

<div id="table"> 
 
    <div id="left"> 
 
    <div class="row"> 
 
     <div id="left_1">left_1</div> 
 
    </div> 
 
    <div class="row"> 
 
     <div id="left_2">left_2</div> 
 
    </div> 
 
    <div class="row"> 
 
     <div id="left_3">left_3</div> 
 
    </div> 
 
    </div> 
 
    <div id="right"> 
 
    <div class="row"> 
 
     <div id="right_1">right_1</div> 
 
    </div> 
 
    </div> 
 
</div>

注意：我希望這不是一個敏感部位......

來源

2017-01-19 05:51:46

謝謝，但這是我現在擁有的，這在水平移動設備上效果很好。我正在試驗bot'flex'和'display：table'因爲你提到的原因：使它響應:) – stenci

@stenci Gotcha！提示：表格和響應性不好... –

的div顯示：表列有大小= 0

回答

相關問題