如何为“display:table-cell”元素设置最大宽度？答案

【问题标题】：How can I set a max width to a "display:table-cell" element?如何为“display:table-cell”元素设置最大宽度？
【发布时间】：2017-01-16 04:43:28
【问题描述】：

我的目标是获得一个侧边栏布局，它应该根据浏览器窗口的宽度进行缩放。有些部分应该有一个缩放的宽度，其他应该有一个静态的宽度，有些应该缩放但具有最小/最大宽度。（如果能根据里面的内容展开一些也很好）

html:

<div id="table">
  <div id="row">
    <div id="sidebar">at least 90px width<br/>not more than 130px width</div>
    <div id="content">scale</div>
    <div id="logo">should be static 60px</div>
    <div id="sidebar2">at least 90px width</div>
  </div>
</div>

和css：

#table {
display: inline-table;
width: 100%;
}

#row {
display: table-row;
}

#table #row div {
display: table-cell;
}

#sidebar {
width: 10%;
min-width: 90px;
max-width: 130px;
}

#content {
width: 70%;
}

#logo {
min-width: 60px;
background-color: #FAB6B8;
}

#sidebar2 {
min-width: 90px;
width: 20%;
}

问题：

似乎max-width 对分配了display:table-cell 的dom 元素没有影响。（我猜）

我尝试使用另一个 div，跨越实际的单元格 div。这会导致问题，即单元格完美缩放，但内容 div 的左侧不会粘在第一个侧边栏上。（同样的问题，如果我将“max-width div”放在单元格内）

使用float: left layout 也不起作用。（如果窗口太小，浮动会中断；不要缩放，如果我使用 div 来保护它）

有没有办法在不使用 js 的情况下解决这个问题？
在#row 中放入一个没有进一步CSS 的div 将适用于一个基于内容扩展的div。可悲的是，如果只有文本在每个单词之后都会中断。如何防止这种情况并能够设置最大宽度并隐藏溢出？

【问题讨论】：

我能问一下为什么需要 display:table-cell 吗？无论您使用它做什么，都可能以不同的方式完成。
感谢您的评论， display:table-cell 是必要的，因为我不能使用 float:left 来获取水平行中的多个元素。我想除了这种方法之外没有其他方法可以实现。
Float:left 会将所有内容排成一行。以及 display:inline。
display:inline 和 float:left 不起作用。 Float:left 会在窗口太小时导致布局中断，并 display:inline lineup 下一个 div 与上一个 div 中的最后一行。
display:inline-block 和 verticle-align:middle;

标签： html css scale tablelayout

【解决方案1】：

我自己找到了答案：

关键是对元素应用绝对宽度，它应该得到一个最大宽度。这并不完美，因为具有绝对宽度的 div 不会缩放，直到具有相对宽度的 div 达到它们的最小宽度，但我想这是唯一的方法。

如此简单。抱歉给您添麻烦了……

【讨论】：