0

左、コンテンツ、右の 3 つの列を含む次のレイアウトが必要です。

左右のコンテンツには単純に画像が含まれ、左側の列には画像が含まれます。画像はブラウザの左側、右側の列に配置する必要があります。ブラウザーの右側に画像を配置するため、ブラウザーの幅を変更しても、両方の列が端に収まります。

コンテンツ/中央の列は 960px で固定する必要があり、画面の中央に留まる必要があります。

したがって、ブラウザの幅を変更すると、コンテンツは中央にとどまりますが、ブラウザの幅が縮小されると、左右の列の両方がメインコンテンツを超えず、どちらかの側にとどまります。

私は何度も試しましたが、現在多くの成功を収めています。

ありがとうございます

アップデート:

要求に応じて、私が試したことのjsfiddleを追加しました。

http://jsfiddle.net/UcmBj/

必要なものの 99% が得られますが、コンテンツは中央に配置され、右は右に配置されたままですが、理想的には、コンテンツとパネルが中央に配置されるようにしたいと考えています。

現時点では、左の列を縮小するとコンテンツの一部が表示されますが、コンテンツをウィンドウ/中央に表示して、左の列が画面から左に移動するようにしたいと思います。リンクが役立つことを願っています。

詳細: サイド カラムの最小幅は 280、コンテンツ セクションの幅は 960 に設定する必要があるため、外側のコンテナーは最小 1520 になります。

4

2 に答える 2

0

これはまったく役に立ちますか?

http://www.manisheriar.com/holygrail/index.htm

http://jsfiddle.net/andresilich/6vPqA/3/show/

于 2012-08-16T22:44:31.627 に答える
0

よく見てみると、私がやりたかった方法ではまだ不可能であるように見えるので、cssを使用して左右の列を左右に配置し、cssメディアクエリを使用して負のマージンを追加しましたメインコンテンツを中断しないように、それぞれに移動します。

于 2012-08-30T07:58:16.630 に答える