Question

当我缩小浏览器窗口时，我无法阻止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>

Answer 1

因为您要以像素为单位分配min-width，所以当您的网页变小时，最终您的像素数不足以维持宽度总和，而浏览器正在强制您的博客{{1}包装。您的宽度总计为div，因此一旦浏览器窗口低于900px，您就会开始看到包装。

发生的事情最终导致900px的{{1}}变得大于浏览器宽度的min-width。

使用流体布局防止DIV环绕

1 个答案: