Html 两个div并排出现，但第一个具有宽度auto stetch，第二个取决于上下文

我需要两个并排跳。但第二个（右）的宽度取决于上下文。第一个必须拉伸

HTML:

<div class="div-table">
    <div class="div-table-row">
        <div class="div-table-col1">1st Column<br>1st Column</div>
        <div class="div-table-col2">2nd Column</div>
    </div>
</div>

.div表{显示：表；宽度：100%；}
.div表格行{显示：表格行；背景色：浅灰色；}
.div-table-col1{显示：表格单元格；宽度：100%；填充：5px；背景色：绿色；}
.div-table-col2{宽度：自动；填充：5px；背景色：橙色；}

第1列
第1列
第二栏

.div表{显示：表；宽度：100%；}
.div表格行{显示：表格行；背景色：浅灰色；}
.div-table-col1{显示：表格单元格；宽度：100%；填充：5px；背景色：绿色；}
.div-table-col2{宽度：自动；填充：5px；背景色：橙色；}

第1列
第1列
第二栏

给

col1

一个100%的宽度和

col2

一个0%的宽度

.div表{显示：表；宽度：100%；}
.div表格行{显示：表格行；背景色：浅灰色；}
.div-table-col1{显示：表格单元格；宽度：100%；填充：5px；背景色：绿色；}
.div-table-col2{显示：表格单元格；宽度：0%；填充：5px；背景色：橙色；}

第1列
第1列
第二栏

给

col1

一个100%的宽度和

col2

一个0%的宽度

.div表{显示：表；宽度：100%；}
.div表格行{显示：表格行；背景色：浅灰色；}
.div-table-col1{显示：表格单元格；宽度：100%；填充：5px；背景色：绿色；}
.div-table-col2{显示：表格单元格；宽度：0%；填充：5px；背景色：橙色；}

第1列
第1列
第二栏

谢谢，但是。。。但您更改了第二个分区的显示类型。。。拳头的内容与底部对齐。。。第二个是对齐到顶部。。。浮子：正确的不是正确和干净的解决方案。@Patrik，正如你所说，浮子不是干净的解决方案，因为这个，我把它移走了。谢谢你，但是。。。但您更改了第二个分区的显示类型。。。拳头的内容与底部对齐。。。第二个是对齐到顶部。。。浮球：正确的答案不是正确的干净的解决方案。@Patrik，正如你所说，浮球不是干净的解决方案，因为这个，我把它去掉了。这是典型的正确答案吗？浏览器兼容性如何？@Patrik这是你如何调整单元格大小的，它在所有主流浏览器中都起作用谢谢，在我发布这个问题之前，我找到了这个解决方案。但对我来说这似乎是个糟糕的解决方案。。。赚100%的钱，然后再赚0美元。。。他们绝对不是…：-D@Patrik同意，尽管这是单元格的工作方式，您应该将其解释为100%，这意味着它应该占用内容未占用的100%可用空间，如果0%的空间被占用，这是必需的empty@Patrik边距对单元格不起作用，只能填充。处理这个问题的最常见也是最好的跨浏览器方法是在中间添加一个额外的单元格，并给它一个固定的宽度。另一个选择是在右边的单元格上设置一个左边框，固定的宽度作为边距，它的缺点当然是如果你需要它作为边框，那么它看起来就不好了，这是标准的正确答案？浏览器兼容性如何？@Patrik这是你如何调整单元格大小的，它在所有主流浏览器中都起作用谢谢，在我发布这个问题之前，我找到了这个解决方案。但对我来说这似乎是个糟糕的解决方案。。。赚100%的钱，然后再赚0美元。。。他们绝对不是…：-D@Patrik同意，尽管这是单元格的工作方式，您应该将其解释为100%，这意味着它应该占用内容未占用的100%可用空间，如果0%的空间被占用，这是必需的empty@Patrik边距对单元格不起作用，只能填充。处理这个问题的最常见也是最好的跨浏览器方法是在中间添加一个额外的单元格，并给它一个固定的宽度。另一种选择是在右边的单元格上设置一个左边框，用固定的宽度作为边距，它的缺点当然是，如果你需要它作为边框，那么它就不好看了

.div-table      {display:table; width: 100%;}
.div-table-row  {display:table-row;  background-color : lightgray;}
.div-table-col1 {display:table-cell; width: auto; padding: 5px; background-color : green;}
.div-table-col2 {display:table-cell; width: auto; padding: 5px; background-color : orange;}