私がやろうとしているのは、次のように、ページの中央に配置された 3 列の div を持つことです。
例 (画像の投稿は許可されていません)
ここのウェブサイト/ブログ/その他の質問からさまざまな提案を試みましたが、どこにも到達していないようです.
最初に、div を左にフロートさせてから、親の div に幅を与えて、margin:auto;
それはうまくいきませんでした。
これにフロートの使用をやめて使用するようにという提案がたくさんあることに気付きましたdisplay:inline-block;
だから私はそれを試してみましたが、ある程度は機能します。例：フィドル
しかし、いずれかの div にコンテンツを追加するとすぐに、配置が停止し、ページの下にジャンプします。
これを達成する最も簡単な方法は何ですか(明らかにテーブルを使用せずに)? 私が作っているほど難しいことはないと確信しているので。
乾杯。
不明な幅のフロートを中央に配置するソリューションがあります: http://www.artlebedev.com/tools/technogrette/html/align-center/
これを行うには、左右のマージンを「自動」にして、幅を揃えたい要素を指定します。これは、IE5.x を除くすべての場所で機能する標準準拠の方法です。
<div style="width: 50%; margin: 0 auto;">Hello</div>
これを IE6 で機能させるには、適切な DOCTYPE を使用して標準モードがオンになっていることを確認する必要があります。
IE5/Quirks Mode を本当にサポートする必要がある場合 (最近ではそうすべきではありません)、センタリングへの 2 つの異なるアプローチを組み合わせることができます。
<div style="text-align: center">
<div style="width: 50%; margin: 0 auto; text-align: left">Hello</div>
</div>
vertical-align:top;あなたの意志に加えて.box、ボックスを並べます。
テキストを追加すると問題が解決するように見える理由を説明すると、
「インライン ブロック」のベースラインは、通常のフローの最後のライン ボックスのベースラインです。この場合、ベースラインはマージンの下端です。