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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> </head> <body> <select id="select1"> <option value="option1">Option 1</option> <option value="option2">2016-11-04</option> <option value="option3" selected="selected">Option 3</option> </select> </body> </html>宽度为100％，col1宽度为0％

col2

.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并排，但首先是宽度自动stetch，第二个取决于上下文

2 个答案: