两个 div 并排，但第一个宽度自动拉伸，第二个取决于上下文

Question

我需要并排放置两个 div。但第二个（右）的宽度取决于上下文。而且第一个必须拉长。

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>

CSS

.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;}

Answer 1

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

<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>

Answer 2

给 col1 宽度 100% 和 col2 宽度 0%

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

<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 并排，但第一个宽度自动拉伸，第二个取决于上下文

Two divs side by side, but first with width auto stetch , second depended on context

html

tablecell

css-tables