css - 流動的なレイアウトの固定幅ブロック

Question

流動的なレイアウトでは、同じ行に、固定幅のブロックと最大幅の流動的な幅のブロックを並べて配置する必要があります。ウィンドウのサイズが変更されると、流体幅ブロックのサイズが固定幅ブロックによって「プッシュ」されてサイズ変更されます。

これが私が達成するようになったものです：http：//cssdesk.com/gHvUB

しかし悲しいことに、コンテンツはそのコンテナの外に拡大します....。

誰 ？

Answer 1

あなたが与えた例であなたの目標を達成する一つの方法は

1. 流体ボックスに200pxの右マージンを追加します

2. 固定幅ボックスに-200pxの相対位置を追加します。

   .line {
      ...
      position: relative;
    }
   .fluid {
      ...
      margin-right: 200px;
    }
   .fixed-width {
      ...
      position: relative;
      top: 0;
      right: -200px;
    }
   

Answer 2

css (特に css3) では、これを実現するためのさまざまな方法があります。

ここにいくつかの例があります:

例

例

そして、ここのサイトで：

CSS レイアウト 2 列固定流体

Answer 3

わかりました、最も簡単な方法は、コンテナーをオーバーフローに設定することです: auto. 次に、両方の子コンテナーを position: absolute に設定します。コンテナの position:relative により、コンテナは親の内側に配置されます。次に、親の高さを何かに設定する必要があります。min-height: (値) を試すことができます。ここにサンプルがあります。

お役に立てれば。