0

当我缩小浏览器窗口时，我无法阻止 DIV 换行到下一行。我一定缺少一些小而简单的东西，但我已经做了一段时间了，我无法弄清楚。它似乎只踢掉了“博客”div，而不是“信息”div。有什么建议么？

这是一个例子： http ://www.spynsycle.com/portfolio/

CSS：

/* Level 1 */
#container {
    min-width: 800px;
    width: 100%;
    min-height: 768px;
    height: 100%;
    background-color: lightgrey;
}

/* Level 2 */
#portfolio {
    min-width: 396px;
    width: 40%;
    min-height: 768px;
    height: 100%;
    float: left;
    background-color:lightgreen;

} 
#information {
    min-width: 108px;
    width: 20%;
    min-height: 768px;
    height: 100%;
    float: left;
    background-color: lightcoral;
}
#blog {
    min-width: 396px;
    width: 40%;
    min-height: 768px;
    height: 100%;
    float: left;
    background-color: lightblue;
}

HTML：

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Portfolio</title>
        <link rel="stylesheet" href="css/index.css" type="text/css" />
    </head>
    <body>
        <div id="container">
            <div id="portfolio">
                Port       
            </div>
            <div id="information">
                Info
            </div>
            <div id="blog">
                Blog
            </div>
        </div>
    </body>
</html>
4

1 回答 1

2

因为您min-width以像素为单位进行分配，所以随着页面变小，最终您将用完足够的像素来维持宽度的总和，并且您的浏览器正在强制您的博客div换行。您的宽度总计为900px，因此一旦浏览器窗口下降到下方900px，您将开始看到环绕。

发生的事情最终是你min-width的396px变得大于40%浏览器的宽度。

于 2012-06-05T00:47:48.713 回答