CSS 3佈局3列在1行

Question

我有一行在哪裏填充3列並排像this。問題是當我選擇一個JSON節點時，它將通過添加一個額外的div來填充樹的路徑。因此我的桌子有點像this。

這是我的HTML和CSS代碼：

.Row 
 
{ 
 
    display: table; 
 
    width: 100%; 
 
    height: 500px; 
 
    table-layout: fixed; /*Optional*/ 
 
    border-spacing: 10px; /*Optional*/ 
 
} 
 
.Column 
 
{ 
 
    display: table-cell; 
 
    height: 400px; 
 
    position: static; 
 
} 
 
.jsoneditor-outer.has-nav-bar { 
 
    height: 500px; 
 
} 
 
json-editor{ 
 
    height: 500px; 
 
}

<div class="Row"> 
 
    <div class="Column"><json-editor [options]="editorOptions" [data]="data" ></json-editor></div> 
 
    <div class="Column"><json-editor [options]="editorOptions" [data]="data" ></json-editor></div> 
 
    <div class="Column"><json-editor [options]="editorOptions" [data]="data" ></json-editor></div> 
 
</div>

Answer 1

與此更改上面的CSS代碼：

.Row 
{ 
    display: flex; 
    width: 100%; 
    min-height: 500px; 
    justify-content: stretch; 
} 
.Column { 
    min-height: 400px; 
    width: 33.3%; 
} 
.jsoneditor-outer.has-nav-bar { 
    min-height: 500px; 
} 
json-editor{ 
    min-height: 500px; 
} 

希望，它將工作...