自动拉伸表格单元格div CSS [英] Auto-stretching table-cell div css

问题描述

我知道有很多类似的问题，但是没有一个可以帮助我解决这个问题.我的设置非常简单:

I know there is a lot of similair questions but none of them helped me to solve this. I have very simple setup:

.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，但是最大宽度不能按我的意愿在这里工作.有什么建议吗?

Now I need to stretch first div to content and let the another one take remaining space. I know that maximum width of generated text in first div will be 300px, but max-width dont work here as I would like. Any suggestions please?

推荐答案

也许有更好的方法，但是如果您对行不中断没问题，可以将左侧单元格设置为较小的宽度，而将文本设置为不打破空白

There is probably a better way, but if you're okay with the line not breaking you can set the left cell to a small width and set the text not to break on whitespaces

这是一个小提琴

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

这篇关于自动拉伸表格单元格div CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！