0

画像でわかるように、3 つの固定列で CSS レイアウトを作成したいのですが、最も重要なことは、左 (1) と右 (3) の列が低解像度モニター (またはウィンドウがフルサイズでない場合) で非表示にする必要があることです。

ここに画像の説明を入力

stackowerflow で似たようなものを見つけましたが、左右の列のサイズが固定されていません。また、この例のテキストは、低解像度ウィンドウの「クラッシュ」中央デザインです (中央の列が下がります!)。

jsfiddle.net/XMg2h/418/

4

2 に答える 2

1

これにアプローチする方法は確かに他にもありますが、これが私の簡単な解決策です。これは、あなたが探していた動作を取得するために使用したスタイリングです（うまくいけば？）（HTMLは同じままです）：

.example{
    width:300px;
    margin:0 auto;
    position:relative;
}
.example div{
    position:absolute;
    width:50px;
    top:0;
    height:300px;
}
.example div:first-child{
    left:-50px;
}
.example div:last-child{
    right:-50px;
}
.example div.center{
    width:300px;
    right:0;
}

div の負の右/左は、各サイド カラムの幅の大きさに対応する必要があります。これは、提供したものに基づくJSFiddle の例です。ウィンドウのサイズを変更すると、中央の div が中央に保持されることに注意してください (ウィンドウが中央の div よりも小さくなるポイントまで、その後左に配置されます)。

これがあなたが探していたものであることを願っています！そうでない場合はお知らせください。さらにサポートさせていただきます。幸運を！

于 2013-07-04T21:45:22.023 に答える