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

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>

Run Code Online (Sandbox Code Playgroud)

这是我期望发生的事情:

随着浏览器的最大化,divs并排放置,每个400px宽:它们的最大宽度
缩小浏览器窗口,它们都缩小到200px:它们的最小宽度
进一步缩小浏览器对它们没有影响

从步骤2开始,这是实际发生的事情:

缩小浏览器窗口,一旦它们无法并排放置在其最大宽度,第二个div就会低于第一个
进一步缩小浏览器使它们变窄和变窄,尽可能小到可以制作窗口

所以这是我的问题:

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

而且当然...

我究竟做错了什么？

Answer 1

Amb*_*ber 1

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

归档时间：	15 年，9 月前
查看次数：	2991 次
最近记录：	15 年，9 月前