第1步

Question

我基本上可以创建一个粗略的网格模板。第一行是第一行，第二行有两列，第三行有两列，最后一行一直运行。

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

Answer 1

我已经为＃content-container DIV添加了两种样式：

#content-div {
    max-width:800px; //this container wont be bigger than 800px
    min-width:500px; //and wont be smaller than 500px
}

DEMO

<!DOCTYPE HTML>
<html>
<head>
<title>Test file</title>
</head>

<body>
    <div id="content-container" style="max-width:800px; min-width:500px; 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>

Answer 2

执行此操作的最佳方法是将所有内容设置为width中的%，并使用max-width中的CSS属性min-width和px。

第1步

您已在%设置了大部分值，但内容块的padding和margin除外。所以我做的第一件事就是更新那些%。其次，你已经为这些内容块提供了一个固定的height，当块变得更窄时，需要将其删除以防止文本溢出，所以我已经删除了它（也抽象了CSS）：< / p>

<强> 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和min-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 es。此外，您可以将两个内容块都浮动到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%;
}

Answer 3

使用CSS“min-width”和“max-width”属性。您可以将其设置为％，px或甚至其他测量值，例如cm。

带有css的div容器的最小/最大宽度

3 个答案:

第1步

旧CSS：

新CSS：

第2步

旧CSS：

新CSS：

附加

旧CSS：

新CSS：