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

你可以试试这个：

<强> HTML

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

<强> CSS

.full-width {
    width: 100%;
}
.table {
    display: table;
}
.table-cell {
    display: table-cell;
    white-space: pre;
}
.cell-wide {
  width: 100%
}

Fiddle

Answer 2

我强烈建议不明确地将<div>样式化为表格元素。使用默认的HTML元素，或者使用更流畅的格式样式，例如float。

但是，我建议您使用更现代的CSS3 flex-box及其子样式flex-grow。它可以在这些情况下为您提供更大的灵活性。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

表div的动态宽度

2 个答案: