css - 当元素显示 :table-cell 时忽略最小宽度和最大宽度

Question

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

您是否知道任何变通方法可以让我在以下示例中指定 #sidebar 元素可以拉伸(stretch)多远？

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! */
  }

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