html - 表格div的动态宽度

Question

我需要一个带有 table 显示的 div 构造，而第一个单元格的宽度应与适合它的内容一样宽，没有换行符。第二个单元格应该占据剩余的宽度，

html

<div class="table full-width">
    <div class="table-cell">Cell 1 without br</div>
    <div class="table-cell">Cell 2 just the rest width</div>
</div>

CSS

.full-width {
    width: 100%;
}
.table {
    display: table;
}
.table-cell {
    display: table-cell;
}

Answer 1

我强烈建议不要显式设置 <div> 的样式s 作为表格元素。为此使用默认的 HTML 元素，或者使用更流畅的格式样式，例如 float .

但是，我建议您使用更现代的 CSS3 flex-box , 及其 child 风格 flex-grow .它为您在此类情况下提供了更大的灵 active 。

div.container {
  display: flex; 
  background-color: lightgrey;
  padding: 20px;
  justify-content: space-between;
}
div.shrink, div.grow {
  padding: 20px;
  margin: 0 10px;
  background-color: grey;
  flex-basis: auto;
}
div.shrink {
  flex-shrink: 1;
}
div.grow {
  flex-grow: 1;
}

<div class="container">
  <div class="shrink">
    This will shrink!
  </div>
  <div class="grow">
    This will grow!
  </div>
</div>