Question

我正在尝试使用min-width和max-width调整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并排放置，每个宽400px：最大宽度
缩小浏览器窗口，它们都缩小到200px：最小宽度
进一步缩小浏览器对他们没有影响

这是实际发生的原因，从第2步开始：

缩小浏览器窗口，一旦它们无法并排放置在其最大宽度，第二个div就会低于第一个
进一步缩小浏览器使它们越来越窄，越小，我可以制作窗口

所以这是我的问题：

max-width如果元素在布局中的下降速度低于其最大宽度，则意味着什么？
min-width如果元素会比浏览器窗口不断缩小的情况变得更窄，那么{{1}}意味着什么？
有没有办法实现我想要的：让这些元素并排放置，快乐地缩小，直到它们达到200px，然后调整布局，以便第二个掉落下来？

当然......

我做错了什么？

Answer 1

他们“下降”的原因是由于父元素的大小发生变化（在这种情况下为body）。在它们周围放一个宽度为400像素或更多的包装div，你可以让它们并排坐着。

Answer 2

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

我认为有办法做你想做的事。本文可能与之相关：

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

祝你好运。

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

为什么最小宽度和最大宽度不像我期望的那样工作？

3 个答案: