2011-01-18 16 views
1

に左揃えこれは難しい質問ですが、私はそれを尋ねるために最善を尽くします。右揃えや中央の列

私はコンテンツの中央の列を持っていると私は左に列を追加しますそれの右にあるが、私は彼らに中間の列を "抱きしめる"ようにしたい。中央の列を中央に配置するにはどうすればいいですか?は常にで、他の2つの列には "抱擁"がありますか?

カラムは750pxの固定幅を持っていると、ビューポートが最大化されたときに、基本的には大きなモニターに次のようなものでなければなりません:

------------------------------------- 
|  |  |  |  |  | 
|  |  |  |  |  | 
|  | left | mid | right |  | 
|  |  |  |  |  | 
|  |  |  |  |  | 
------------------------------------- 

と窓は、十分に広く、左右でないとき(彼らは水平方向には小さすぎることはありませんと仮定)の列は、カットオフを取得する必要がありますが、中央の列には、まだ中心と見えるべきである:

------------- 
    | |  | | 
    | |  | | 
le|ft | mid | ri|ght 
    | |  | | 
    | |  | | 
    ------------- 

どこに「ル」と「GHTは」オフスクリーンであり、ビューポートには表示されません。

私はこれを達成するためのあらゆる方法に興味があります。それなしにこれを達成する方法がある場合は現在、私はこのトリッキーな質問を読み取るため)=すべての手段によって、

感謝を中央の列を中央に

margin-left: auto; 
margin-right: auto; 

を使用して、しかしです。私は私のアイデアを思いつきたいと思う。 (あなたがより良い質問のタイトルを考えることができれば、それを編集することが自由です)私は何を置くべきか分かりませんでした

P.S.各列は実際にいくつかのdivs(列を構成するブロック)で構成されていますが、問題が解決しやすくなったのか、それとも問題が完全に変わったのかわかりません...

答えて

1

このような感じですか? http://jsfiddle.net/ndtLX/

私は2つの浮動小数点divsの上に絶対配置されたdivを使用しています。それぞれのコンテナの50%が大きいです。

問題は、ええ、それは私が望んでいたものに非常に近いです

+0

...あなたが尋ねたように、左と右の列に、オフスクリーンは、他の側にではなく、同じ側に起こるということです左右の列が固定幅であり、内容がシフトしない点が異なります。これは確かに私が求めたものです。 – sova

1

あなたは浮動小数点を試して、それがあなたの望みを与えるかどうかを確認することもできます

.divLeftCol 
{ 
    float: left; 
} 

.divRightCol 
{ 
    float: right; 
} 

<div class="divLeftcol"></div> 
<div class="divCenter"></div> 
<div class="divRightcol"></div> 
関連する問題