gpt4 book ai didi

html - 带有CSS的div容器的最小/最大宽度

转载 作者:行者123 更新时间:2023-11-27 23:57:11 24 4
gpt4 key购买 nike

可以这么说,我基本上已经创建了一个粗略的网格模板。有顶行,一直贯穿,第二行,有两列,第三行,有两列,还有底行,一直贯穿。

现在一切都固定在一定的大小。我想要做的是,如果用户调整他们的窗口大小,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-widthmin-widthpx .

第一步

您已经在 % 中设置了大部分值, 除了你的 paddingmargin为您的内容 block 。所以我做的第一件事就是更新那些在 % 中的内容。以及。其次,您已经为这些内容 block 提供了一个固定的 height。 ,当 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%;
}

第二步

现在我们已经完成了,我们可以将所有内容更改为具有固定边界的灵活模型。我们将顶部容器更改为 width:100%而不是 width:1500px , 然后给它一个 max-widthmin-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 的单个实例s,所以我们应该将它们切换为 class es。此外,您可以将两个内容 block float 到 left因为你中间没有任何内容。这将使您节省一些代码行,并摆脱 .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/

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