0

レスポンシブ サイトを作成しようとしています (ブラウザー ウィンドウのサイズを変更して変更を確認します) が、これらの市松模様の div を中央に配置できません。

http://arunmahendrakar.com/ktw/play.html

div は動的に作成され、4 つの「コンテナ」div (#topLeft、#topRight、#bottomLeft、および #bottomRight) のいずれかに追加されます。

margin-left:auto; を使用してみました。および margin-right:auto をさまざまな要素で使用しましたが、それは役に立ちませんでした。

#topLeft、#topRight、#bottomLeft、#bottomRight div を水平方向に中央揃えするのを手伝ってください。私は純粋な CSS ソリューションを好みますが、それができない場合は、js の微調整でも問題ありません。

4

1 に答える 1

1

その構造を構築する方法を微調整することで、これを行うためのさまざまな方法がたくさんあります。これが私がすることです：

まず、物事のサイズを通常より少し大きくします。象限 (#topLeftたとえば)width: 100%と個々の正方形のサイズを作成しpadding: 5%ます。これにより、正方形は現在と同じサイズになりますが、幅が 100% であるため、オブジェクトが実際に配置したい場所の中央に配置されます。200% では、象限の「中心」が 50% ずれます。

float次に、とを使用する代わりに、正方形clearで使用します。display: inline-blockこれにより、それらすべてが 1 行で一緒に実行されます。<br>Javascript は、5 つの正方形ごとにa を挿入することで、手動でそれらを分割できます。clearBothこれを行うと、クラスを追加する必要がなくなります。

この時点で、ほぼ正確に必要なものが揃っているはずです。ただし、正方形の各行の間に余分なスペースがあります。これは HTML の空白が原因であり、それを取り除くには、(#topLeftたとえば) 象限が設定されていることを確認してfont-size: 0ください。

それはそれを行う必要があります！

説明

それは非常に単純です:display: inline-blockテキストの配置に従います。float の代わりに要素からチェッカーボードを作成することにより、 out をinline-block変更するだけで、それらが整列する側を制御できますtext-align。

他のすべてのものは、この手法をうまく機能させるために必要なクリーンアップ作業です。

于 2013-05-01T04:25:18.057 に答える