可以说，我基本上创建了一个网格的粗略模板。最上面一行，一直贯穿，第二行，有两列，第三行，有两列，最后一行，一直贯穿。
现在一切都固定在一定的大小。我想要做的是，如果用户调整窗口大小，div 容器将缩小到最小尺寸，并且如果用户扩展窗口，则设置最大尺寸。任何建议表示赞赏。下面是我的代码。请原谅内联 CSS，我通常不会那样编码。
<!DOCTYPE HTML>
<html>
<head>
<title>Test file</title>
</head>
<body>
<div id="content-container" style="width:1500px; background:white;">
<div id="top-wrapper" style="width:100%; float:left; padding-bottom:50px; padding-top:50px; background:blue;">
<div id="top-strip" style="width:100%; text-align:center;">
<div id="toDesktopRecentTabs" style="float:left; width:20%;">Test</div>
<div id="toDesktopCustomize" style="float:left; width:20%;">Test</div>
<div id="toDesktopBuildingInventory" style="float:left; width:20%;">Test</div>
<div id="toDesktopDCStandards" style="float:left; width:20%;">Test</div>
<div id="toDesktopSupportingDocs" style="float:left; width:20%;">Test</div>
</div>
</div>
<div id="row-container" style="float:left; width:100%; background:red;">
<div id="left" style="clear:left; float:left; width:45%; height:150px; padding:20px; margin:0 0 0 20px; display:inline; background:purple;">
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<div id="right" style="float:right; width:45%; height:150px; padding:20px; margin:0 20px 0 0; display:inline; background:green;">
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<br style="clear:both;" />
<br />
<div id="row-container" style="float:left; width:100%; background:red;">
<div id="left" style="float:left; width:45%; height:150px; padding:20px; margin:0 0 0 20px; display:inline; background:cyan;">
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<div id="right" style="float:right; width:45%; height:150px; padding:20px; margin:0 20px 0 0; display:inline; background:pink;">
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div id="footer" style="clear:both; background:yellow; text-align:left; padding:20px;">
Copyright © Site name, 20XX
</div>
</div>
</body>
</html>
最佳答案
执行此操作的最佳方法是将所有内容设置为 % 中的 width，并使用 CSS 属性 max-width 和 最小宽度，单位为px。
第 1 步
您已在 % 中设置了大部分值，但内容 block 的 padding 和 margin 除外。所以我做的第一件事就是将它们更新为 % 。其次，您为这些内容 block 指定了固定的高度，需要将其删除以防止当 block 变得更窄时文本溢出，因此我将其删除(还抽象了 CSS):
<强> http://jsfiddle.net/hYtH8/
旧 CSS:
.left {
float:left;
width:45%;
display:inline;
height:150px;
padding:20px;
margin:0 20px 0 0;
}
.right {
float:right;
width:45%;
display:inline;
height:150px;
padding:20px;
margin:0 0 0 20px;
}
新 CSS:
.left {
float:left;
width:45%;
display:inline;
padding:2%;
margin-left:1%;
}
.right {
float:right;
width:45%;
display:inline;
padding:2%;
margin-right:1%;
}
第 2 步
现在我们已经做到了这一点，我们可以将一切更改为具有固定边界的灵活模型。我们将顶部容器更改为 width:100% 而不是 width:1500px，然后为其指定 max-width 和 最小宽度。
<强> http://jsfiddle.net/hYtH8/3/
旧 CSS:
#content-container {
width:1500px;
background:white;
}
新 CSS:
#content-container {
width:100%;
max-width:1500px;
min-width:800px;
background:white;
}
成功了!
额外
几个笔记。我注意到您在整个过程中都有重复的id。例如，#row-container 和 #left。 CSS 只允许 id 的单个实例，因此我们应该将它们切换为 class 。此外，您可以将两个内容 block 向左浮动，因为中间没有任何内容。这将使您节省一些代码行，并完全摆脱 .left 和 .right:
<强> http://jsfiddle.net/hYtH8/5/
旧 CSS:
#row-container {
float:left;
width:100%;
background:red;
}
#left {
float:left;
width:45%;
display:inline;
padding:2%;
margin-left:1%;
}
#right {
float:right;
width:45%;
display:inline;
padding:2%;
margin-right:1%;
}
新 CSS:
.row-container {
float:left;
width:98%;
background:red;
padding:0 1%;
}
.row-container div {
float:left;
width:46%;
display:inline;
padding:2%;
}
关于html - 带 css 的 div 容器的最小/最大宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23302889/