Question

这是如何扩展div以占用所有可用空间的常见问题。唯一的特色是这是一个带显示表格的div。见http://jsfiddle.net/djx9zx47/1/

<div class="col col-a">
  <div class="cell cell-a">
    <div>Last Login</div>
  </div>
  <div id="last_login" class="cell cell-b">
     Jan-05-2015 05:02:03 GMT
  </div>
</div>  
<div class="col col-b">
  <div class="cell cell-c">
    <div>Login Status</div>
  </div>
  <div id="login_status" class="cell cell-d">
     Active
  </div>
</div>

.cell-a {
    font-weight: bold;
    width:130px;
}
.cell-b {
    width: auto;
    overflow: hidden;
}

我想让第二列占据他们可用的所有空间。

我已经检查了所有其他关于让div占用所有空间的问题，但没有一个有效，我假设因为显示：table-cell。

编辑（澄清）：我的意思是让cell-b和cell-d占用所有可用的空间。

EDIT2：call-a必须保持其固定宽度，所以将cell-b设置为100％并不能解决问题

Answer 1

我认为您应该稍微重新组织标记，在单元格周围添加一个包装（作为另一个表）。然后它将变为table > table-row > table-cell和table > table-cell。

我也简化了你的CSS。请参阅以下内容。

.table {
    display: table;
    width: 100%;
    border-collapse: collapse;
}
.row {
    display: table-row;
}
.col {
    display: table-cell;
    width: 50%;
}

.cell {
    display: table-cell;
    padding: .5em;
    border: 1px dotted #ccc;
}
.cell-a, .cell-c {
    font-weight: bold;
    width: 100px;
}

<div class="table">
    <div class="row">
        <div class="col col-a">
            <div class="table"> <!-- <= this is new-->
                <div class="cell cell-a">
                    <div>Last Login</div>
                </div>
                <div class="cell cell-b" id="last_login">Jan-05-2015 05:02:03 GMT</div>
            </div>
        </div>
        <div class="col col-b">
            <div class="table"> <!-- <= this is new-->
                <div class="cell cell-c">
                    <div>Login Status</div>
                </div>
                <div class="cell cell-d" id="login_status">Active</div>
            </div>
        </div>
    </div>
</div>

小提琴演示： http://jsfiddle.net/9sge8mxe/

Answer 2

如果我非常了解您正在寻找的内容，您可以将.cell-b和.cell-d的宽度设为100%：

.cell-b, cell-d{
    width:100%!important;
}

Fiddle

<强>更新要保持第一个单元格.cell-a的宽度，如果您始终将内容包装在第二个div中，那么您可以添加以下内容：

.cell-a > div {
   width: 130px;
}

Answer 3

添加此样式：

.col {
  display: table;
}

Fiddle

扩展表格单元以占用所有空间

3 个答案: