gpt4 book ai didi

css - 为什么 min-width 和 max-width 没有像我预期的那样工作?

转载 作者:技术小花猫 更新时间:2023-10-29 11:23:20 24 4
gpt4 key购买 nike

我正在尝试使用最小宽度和最大宽度来调整 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 像素宽:它们的最大宽度
  • 缩小浏览器窗口,它们都缩小到 200px:它们的最小宽度
  • 进一步缩小浏览器对他们没有影响

这是实际发生的,从第 2 步开始:

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

所以这是我的问题:

  • max-width 是什么意思,如果元素会在布局中跳下而不是低于其最大宽度?
  • min-width 是什么意思,如果元素会愉快地变得比浏览器窗口不断缩小时的宽度更窄?
  • 有没有办法实现我想要的:让这些元素并排放置,快乐地缩小直到每个元素达到 200 像素,然后只有这样调整布局,使第二个元素下降下来?

当然...

我做错了什么?

最佳答案

它们“下降”的原因是它们的父元素(在本例中为 body)的大小发生变化。在它们周围放置一个宽度为 400 像素或更大的包装器 div,您可以让它们并排放置。

关于css - 为什么 min-width 和 max-width 没有像我预期的那样工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2837489/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com