为什么 min-width 和 max-width 没有像我预期的那样工作？答案

【问题标题】：Why aren't min-width and max-width working as I expect?为什么 min-width 和 max-width 没有像我预期的那样工作？
【发布时间】：2010-05-14 20:43:31
【问题描述】：

我正在尝试使用最小宽度和最大宽度调整 CSS 页面布局。为了简化问题，我制作了这个测试页面。我正在最新版本的 Firefox 和 Chrome 中尝试，结果相同。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Testing min-width and max-width</title>
    <style type="text/css">
       div{float: left; max-width: 400px; min-width: 200px;}
       div.a{background: orange;}
       div.b{background: gray;}
    </style>
  </head>
  <body>
    <div class="a">
      (Giant block of filler text here)
    </div>
    <div class="b">
      (Giant block of filler text here)
    </div>
  </body>
</html>

这是我期望发生的事情：

浏览器最大化后，div 并排放置，每个 400 像素宽：它们的最大宽度
缩小浏览器窗口，它们都缩小到 200 像素：它们的最小宽度
进一步缩小浏览器对它们没有影响

以下是实际发生的情况，从第 2 步开始：

缩小浏览器窗口，一旦它们不能以最大宽度并排放置，第二个 div 就会低于第一个
进一步缩小浏览器会使它们变得越来越窄，我可以让窗口尽可能小

所以这是我的问题：

max-width 是什么意思，如果元素在布局中跳下而不是小于其最大宽度？
min-width 是什么意思，如果元素会比浏览器窗口不断缩小时更窄，那是什么意思？
有什么方法可以实现我想要的：让这些元素并排放置，愉快地缩小，直到它们每个达到 200 像素，然后然后调整布局，使第二个元素下降下来了吗？

当然……

我做错了什么？

【问题讨论】：

标签： css

【解决方案1】：

它们“下拉”的原因是由于其父元素的大小发生了变化（在本例中为 body）。在它们周围放置一个宽度为 400 像素或更大的包装 div，您可以让它们并排放置。

【讨论】：

在它们周围包裹了一个 div 并给它一个规则：width: 900px;。现在他们从来没有并排坐着。尝试添加一个左浮动以防它崩溃。没有变化。

【解决方案2】：

我认为（这只是我个人的经验），max-width 适用于 div 内的内容。因此，如果 div 中只有 1 个单词，则宽度为 200px，但如果 div 中有 300 个单词，则宽度将为 400px。

我认为有一种方法可以做你想做的事。这篇文章可能与它有关：

http://net.tutsplus.com/tutorials/design-tutorials/quick-tip-different-layouts-for-different-widths/

祝你好运。

【讨论】：

【解决方案3】：

至少回答一下：

min-width 确实是关于浏览器应该在何时显示页面的水平滚动条。

虽然试验浮动只有在设置了width 时才能真正发挥作用，所以我会使用设置了最小和最大宽度的父级div 并将width: 50% 添加到子div 中。这解决了除了 div 更改布局之外的所有问题。为此，我可能会参考 javascript。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Testing min-width and max-width</title>
    <style type="text/css">
       div.cont {max-width: 700px; min-width: 400px;}
       div.a, div.b {float: left; width: 50%; }
       div.a{background: orange;}
       div.b{background: gray;}
    </style>
  </head>
  <body>
      <div class="cont">
    <div class="a">
      Morbi malesuada nulla nec purus convallis consequat... 
    </div>
    <div class="b">
      Vivamus id mollis quam. Morbi ac commodo nulla... 
    </div>
    </div>
  </body>
</html>

【讨论】：