Question

我知道有很多类似的问题，但没有一个能帮助我解决这个问题。我的设置非常简单：

.wrapper {
  width: 100%;
  display: table;
}

.dontBreakmyLine {
  display: table-cell;
}

.iCanUseWhatIsLeft {
  display: table-cell;
}

<div class="wrapper">
  <div class="dontBreakmyLine">
    Some generated text
  </div>
  <div class="iCanUseWhatIsLeft">
    Another generated text
  </div>
</div>

现在我需要将第一个div拉伸到内容，让另一个占用剩余空间。我知道第一个div中生成的文本的最大宽度将是300px，但是max-width不能像我想的那样在这里工作。有什么建议吗？

Answer 1

可能有一种更好的方法，但是如果您对线条没有打破没问题，可以将左侧单元格设置为较小的宽度，并将文本设置为不在空白处打破

这是一个小提琴

http://jsfiddle.net/hqWaU/

.wrapper {
    width: 100%;
    display: table;
}
.dontBreakmyLine {
    display: table-cell;
    width: 1px;
    white-space:nowrap;
}
.iCanUseWhatIsLeft {
    display: table-cell;
}
div {
    border: 1px solid silver;
}

Answer 2

没有display: table;的可能解决方案是将两个框都设置为position: relative;，向左浮动并使用right: 0px;（DEMO）拉伸右框。

.wrapper {
    width: 100%;
}

.dontBreakmyLine {
    max-width: 300px;
    float: left;
    position: relative;
    z-index: 2;
}

.iCanUseWhatIsLeft {
    position: relative;
    right: 0px;
    z-index: 1;
}

一旦文本长于300px，文本就会中断但如果文本不会更长则无关紧要。如果您不希望在左侧文本下方显示正确的文本流，请将display: table-cell添加回框。

如果您仍然不想阻止换行符，则可以使用white-space:nowrap;，甚至可以与overflow: hidden;（DEMO）结合使用。

自动拉伸table-cell div css

2 个答案: