当元素具有 display:table-cell 时忽略 min-width 和 max-width答案

【问题标题】：min-width and max-width are ignored when element has display:table-cell当元素具有 display:table-cell 时忽略 min-width 和 max-width
【发布时间】：2010-12-04 03:51:06
【问题描述】：

我正在尝试使用CSS tables technique 进行简单的流体布局，但我发现其中存在一个大缺陷：在具有表格单元格显示的元素上忽略了最小宽度和最大宽度。

您是否知道任何解决方法可以让我在以下示例中指定#sidebar 元素可以伸展多远？

XHTML：

<div id="wrapper">

  <div id="main">
  </div>

  <div id="sidebar">
  </div>

</div>

CSS：

#wrapper {
display: table-row;
border-collapse: collapse;
}

  #main {
  display: table-cell;
  }

  #sidebar {
  display: table-cell;
  width: 30%;
  min-width: 100px;  /* does not work! */
  max-width: 310px;  /* does not work! */
  }

【问题讨论】：

标签： css css-tables

【解决方案1】：

在每个 div 中添加另一个包装器：

<div id="wrapper">

  <div id="main">
    <div class="inner"></div>
  </div>

  <div id="sidebar">
    <div class="inner"></div>
  </div>

</div>

并在它们上面加上*-width 声明：

#sidebar div.inner {
    min-width: 100px;
    max-width: 300px;
}

【讨论】：

谢谢，添加额外的内部 div 允许我指定最小宽度。但是将 max-width 添加到内部 div 不会阻止 #sidebar 变大，这里是截图：wstaw.org/d/5ed3

【解决方案2】：

我正在为一个显示左 -> 右然后向下的网站寻找响应式设计，并希望自己实现最小宽度。做一些研究，我认为这可能会回答这个问题。

https://css-tricks.com/almanac/properties/m/max-width/

【讨论】：

【解决方案3】：

如果您只是想进行侧边栏和主设置，请使用 float: left 而不是 table-row 和 table-cell。然后你可以把你的最小宽度放在 id 上。

【讨论】：

如果您需要aside 与main 相同的高度（或相反）将它们浮动到彼此是行不通的。这就是首先要做display: table 和display: table-cell 的原因。