4

可変幅のコンテンツの左側に固定幅メニューがある可変幅HTMLレイアウトがあり<div>ます（css max-widthとmin-widthで設定）。非常に狭いブラウザウィンドウの場合、コンテンツをメニューの下に折り返したいのですが、現在float:left、メニューとコンテンツの両方を設定することでこれを実現しています。

<html>
<head>
<title></title>
</head>
<body>
<div style="width: 200px; float: left; border: 1px black solid">Menu (200px wide)</div>
<div style="max-width: 800px; min-width: 300px; float:left; border: 1px black solid">Content div. This div has max-width: 800px; min-width 300px. It has enough text that it expands to its max-width if there is space available to do so.</div>
</body>
</html>

この例では、div現在、ブラウザのビューポートが1000px（メニュー幅+コンテンツの最大幅）よりも小さくなるとすぐにコンテンツの折り返しが発生します。最初にコンテンツの幅を狭くし、ビューポートが500px幅（メニュー幅+コンテンツの最小幅）よりも小さい場合にのみコンテンツをメニューの下にラップさせたい

現在のfloated<div>の配置を使用するか、それ以外の方法でこれを実現する方法はありますか？

4

3 に答える 3

5

これが必要な動作であるかどうかを確認してください。

デモ

JSFiddle

HTML

<html>
<head>
<title></title>
</head>
<body>
<div class="menu">Menu (200px wide)</div>
<div class="content">Content div. This div has max-width: 800px; min-width 300px. It has enough text that it expands to its max-width if there is space available to do so.</div>
</body>
</html>​

CSS

.menu {
    width: 200px;
    float: left;
    border: 1px black solid
}

.content {
    max-width: 800px;
    min-width: 300px;
    margin-left: 200px;
    border: 1px black solid
}

@media all and (max-width: 500px) {

.menu {
    float: none;
}

.content {
    margin-left: 0;
}

}
于 2012-08-22T13:34:58.290 に答える
3

これがあなたが望むものだと思います：http://jsfiddle.net/joplomacedo/WXFQz/

解決策は単純なメディア クエリです。XYZpxの画面幅以下でこれを実行します。聞いたことがない場合は、それに関する記事があります http://css-tricks.com/resolution-specific-stylesheets/

フィドルが見えない人のために、ここに html と css があります:

HTML:

<div class="container"> <!-- it's possible to do it without this extra element. it's simply more intuitive this way -->
    <div class="menu"></div>
    <div class="content"></div>
</div>

</p>

CSS:

.container {
    max-width: 1000px; /* your self defined 800px max-width for the content-div + 200px from the .menu's width */
    min-width: 200px;
}

.menu,
.content {
    height: 200px;
}

.menu {
    float: left;
    width: 200px;
}

.content {
    margin-left: 200px; /* same as '.menu's width */
}

@media (max-width : 400px) {
    .menu {
        float: none;
        width: auto;
    }

    .content {
        margin-left: 0;
    }
}
​
于 2012-08-22T13:35:57.137 に答える
0

css-tricks からのデモがあります:

http://css-tricks.com/examples/PerfectFluidWidthLayout/

これがあなたにとって良いことであることを願っています。

于 2012-08-22T13:43:01.110 に答える