CSS 3布局3列在1行

问题描述：

我有一行在哪里填充3列并排像this。问题是当我选择一个JSON节点时，它将通过添加一个额外的div来填充树的路径。因此我的桌子有点像this。CSS 3布局3列在1行

这是我的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>

你必须提供没有工作代码的工作代码我无法解决你的问题 –

答

与此更改上面的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; 
}

希望，它将工作...

CSS 3布局3列在1行

相关推荐