css - css 流体設計の問題

Question

ここでコードを見つけてください: http://jsfiddle.net/yuliantoadi/XQuuT/

grid_1 と grid_2 の幅は 50px に固定されていますが、grid_2 の幅は 80% です。問題は、ラッパーの幅を減らすと、grid_3 div がダウンすることです。

javascript を使用せずにラッパーの幅を減らしたときに、grid_3 を一番上にとどめる方法はありますか?

grid_1 と grid_3 の幅を変更しないでください。

Answer 1

ソリューション CSS:

.grid_1{
    float: left;
    width: 50px;
    background-color: green;
}
.grid_3{
    float: right;
    width: 50px;
    background: red;
}
.grid_2{
    background: yellow;
}

ソリューション HTML:

<div class="wrapper">
    <div class="grid_1">
        left
    </div>
    <div class="grid_3">
        right
    </div>
    <div class="grid_2">
        the content
    </div>
</div>

HTML は最初に左のフロートを設定し、次に右のフロートを設定し、次にコンテンツを設定することに注意してください。コンテンツはフローティングされていないため、フローティングされた要素の間でレンダリングされます。また、コンテンツには幅が定義されていないため、スペースを埋めます。

Answer 2

この問題は、可変要素幅と固定要素幅を組み合わせて使用​​することによって発生します。

ラッパーの幅が 1000px だとします。grid_1 は 50px、grid_3 は 50px、grid_2 は 80% または 800px です。これで問題ありません。すべてがうまく整列します。

ラッパーの幅が 400px の場合、grid_1 と grid_3 は 50px のままで、grid_2 は 320px (400px の 80%) です。これは、50+50+320 = 420px であるため、3 つの要素を並べて配置できないことを意味します。

基本的に、ラッパーの幅が 500px 未満になるとすぐに、grid_3 が新しい行にラップされます。

何を達成しようとしているのかを正確に知らなければ、解決策を提供することは困難です

Answer 3

グリッド 1 と 3 が固定幅の場合、それは不可能だと思います。グリッド 3 が下がるのを避けるために、最小幅を設定できます。

Answer 4

負のマージンを使用する別の方法もあります。HTML は同じで、左右の要素に負のマージンを追加し、中央に正のマージンを追加して、中央をdiv辺の外側の端まで伸ばすことができますdiv。

[class^=grid_]{
    float:left;
}
.grid_1{
    width:50px;
    margin-right: -50px;
    background-color:red;
}
.grid_2{
    width: 80%;
    margin-left: 50px;
    margin-right: 50px;
    background-color:cyan;
}
.grid_3{
    width:50px;
    margin-left: -50px;
    background:red;
}