Question

我正在尝试使用CSS tables technique进行简单的流体布局，但是我发现了一个很大的缺陷：在具有表格单元格显示的元素上忽略了min-width和max-width。

您是否知道任何可以让我指定#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! */
  }

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

Answer 2

我正在查看显示左侧的网站的响应式设计 - ＆gt;然后向下，想要达到自己的最小宽度。做一些研究我认为这可能会回答这个问题。

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

Answer 3

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

当元素显示时，忽略min-width和max-width：table-cell

3 个答案: