使 DIV 填充表格单元格答案

【问题标题】：Make DIV to fill table cell使 DIV 填充表格单元格
【发布时间】：2016-03-21 12:15:35
【问题描述】：

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

绿色单元格中有两个 DIV：第一个具有 margin-left: 40px，第二个铅笔具有 100% 的宽度。我希望后一个 DIV 像这样占用空闲空间：

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

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

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

【问题讨论】：

尝试设置一些填充。希望这会有所帮助。
@NomanJaved，你能解释一下你的建议吗？
试试这个。 div.left div.handler.offset [+] title JS Bin 中的铅笔
基于 JS Bin，这实际上是一系列 DIV，你强迫它们像一张桌子一样。您是否有理由不使用实际的表格来构建它？
@Angelique 好吧，完整的解决方案（不是 JS Bin 示例）不是语义上的表格，所以我担心在那里使用实际表格会不好。

标签： html css

【解决方案1】：

~~如果您像这样设置div.title，它将起作用~~

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

将“50px”调整为更精确到div.handler占用的空间。

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

通过在您的 JSBin 中更改为 this，它可以工作

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

  & > * {
  }

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

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

}

示例 sn-p

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

【讨论】：

感谢您的建议！我希望我可以使用calc() 函数，但是这个函数必须与 IE8 兼容。
不幸的是，我无法让它工作：.title 宽度设置为内容，而不是扩展到单元格的其余部分。
@Yaruson 更新了 .. 现在它应该适合你了 .. Updated JSBin

【解决方案2】：

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

【讨论】：

感谢您的回答。我还必须为.left 类设置display: table-row 才能使其正常工作。好吗？
Stack Overflow 接受这样的仅代码答案，但对其他人来说并不是非常的帮助。请edit您的回答并解释您的代码是如何工作的。有时，还有为什么 OP 的代码不起作用。
@Yaruson，对于您的 jsbin，它只适用于这两个。如果您需要对完整代码进行一些其他更改，这取决于您。

【解决方案3】：

这个答案实际上取决于您希望如何处理文本溢出 - 但如果您只是将 .title 更改为具有 display:inline （而不是 inline-block ），那么它似乎会按照您的意愿呈现。但是，当单元格中的文本比单词“铅笔”长得多时，这可能不是您想要的结果。

【讨论】：