私は 3 つに分割されている Web サイトに取り組んでいます。絶対中央に画像があり、左右にテキストがあります。Webページの幅が変わったときに、個々のセクションを均等に中央に配置するにはどうすればよいですか? margin-left/right auto を含む何か?
すべてが理にかなっていることを願っています..
ありがとう!
テキスト図
| | 1 | 2 | 3 |
引き伸ばされたウェブページ
| | * * 1 * * | * * 2 * * | * * 3 * * |
各列のコンテンツの幅が事前にわかっている場合は、3 つのスケーリング div を使用して列を表すことができます。それぞれに、コンテンツの固定幅の中央 div が含まれます。
本文では、3 つの列に対して次のように指定できます (ピクセル幅をページに適したサイズに置き換えます)。
<div class="outer" style="margin-left:0; margin-right:67%;">
<div class="inner" style="width: 100px;">
<p>some text</p><p>more text</p></div></div>
<div class="outer" style="margin-left:33%; margin-right:33%;">
<div class="inner" style="width: 200px;">
<img src="someimage"></div></div>
<div class="outer" style="margin-left:67%; margin-right:0;">
<div class="inner" style="width: 150px;">
<p>and another<br>piece of text</p></div></div>
そして、head では、各タイプの div のスタイル。
<style type="text/css">
.outer {
position:absolute;
width:33%;
}
.inner {
margin-left:auto;
margin-right:auto;
}
</style>
サイトのニーズに応じて、内側の div ごとに絶対サイズを設定したり、相対的なサイズ (33% 幅の div を含む割合) を設定したり、絶対的な左マージンと右マージンの幅を設定したりできます。