使DIV填充表格单元格

Question

我希望桌面单元格内的DIV适合所有可用空间。

绿色单元格中有两个DIV：第一个有margin-left: 40px，第二个铅笔宽度为100％。我希望后面的DIV能够获得这样的自由空间：

我认为问题在于，铅块的100％宽度实际上是它的父宽度，即绿色单元格。因为还有一些带有一些宽度和边距的黄色框，单元格的内容溢出并分成两个“行”。不幸的是，

如果没有JavaScript，我找不到用CSS实现所需布局的方法。它有可能吗？

让我分享一个实际的例子：JS Bin。先感谢您！

Answer 1

如果你像这样设置div.title它会起作用

width: calc(100% - 50px); // This one

调整“50px”以更准确地占据div.handler所占据的空间。

根据有关支持IE8的评论进行更新

通过在JSBin中更改为此，它可以正常工作

.left {
  .border(green);
  width: @width-left;
  overflow: hidden;

  & > * {
  }

  .handler {
    .border(magenta);
    background-color: yellow;
    width: 20px;
    float: left;
  }

  .title {
    .border(red);
    overflow: hidden;
  }

}

示例代码段

.table {
  border: 1px dotted grey;
  display: table;
  width: 80%;
  box-sizing: border-box;
}
.table .row {
  display: table-row;
}
.table .row > * {
  display: table-cell;
}
.table .row .left {
  border: 1px dotted green;
  width: 40%;
  overflow: hidden;
}
.table .row .left .handler {
  border: 1px dotted magenta;
  background-color: yellow;
  width: 20px;
  float: left;
}
.table .row .left .title {
  border: 1px dotted red;
  overflow: hidden;
}
.table .row .right {
  border: 1px dotted blue;
  width: 60%;
}
.table .row .right > * {
  display: inline-block;
}
.table .offset {
  margin-left: 40px;
}

<div class="table">
  <div class="row">
    <div class="left">
      <div class="handler offset">[+]</div>
      <div class="title">Pencil</div>
    </div>
    <div class="right">
      <div class="price">$0.60</div>
      <div class="quantity">14 PCS</div>
      <div class="total">$8.40</div>
    </div>
  </div>
</div>

Answer 2

.table .row .left .handler,
.table .row .left .title {
  display: table-cell;
}

Answer 3

这个答案实际上取决于你希望如何处理文本溢出 - 但是如果你只是改变.title来显示：inline（而不是inline-block），那么它似乎就像你想要的那样呈现。但是，当单元格中的文本比单词“Pencil”长得多时，这可能不是理想的结果。