0

ブラウザー ウィンドウを縮小すると、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 に答える