divタグで3カラムのレイアウトを試してみる。
よくからんで下さる瑞閏さんの「Libro,Musica,Planta Ver2.1」で以下のような会話があったので、
ちょっと気になったので試してみました。
↓結果↓
こんな感じでいけるっぽい。ポイントは、
・左のdivをfloat: left; にする。
・中央のdivをfloat: left; にする。
・右のdivをfloat: right; にする。
って感じです。
あとは、適切な幅…、ここでは20%, 55%, 20%にしましたが、ピクセル指定とかでもいいかもしれない。ぴったり20%, 60%, 20%で100%にしていないのはIEで表示が崩れるからで、* { margin: 0; padding: 0; } とかで回避出来そうだけど、また別途調べようかなと。
あとでこのへんのソースを調べてみよう。
当ブログのスタイルシートも眺めていますが、
floatがどこにも見つかりませんし、
HTMLはやたらとテーブルタグだらけで、
もしやtableレイアウトなのかと思っています。
それとも横マージンを3回指定するだけでもいいのか？
とも思いますが・・・。
所詮ヘナチョコウェブマスターはこんな程度です(笑)。
サイト開設３周年です。
ちょっと気になったので試してみました。
<body>
<div style="background-color: silver; width: 100%;">
hoge hoge hoge hoge<br />
hoge hoge hoge hoge<br />
</div>
<div>
<div style="float: left; width: 20%; background-color: red;">
hoge<br />
hoge<br />
hoge<br />
hoge<br />
hoge<br />
hoge<br />
hoge<br />
</div>
<div style="float: left; width: 55%; background-color: green;">
hoge<br />
hoge<br />
hoge<br />
hoge<br />
hoge<br />
hoge<br />
hoge<br />
</div>
<div style="float: right; width: 20%; background-color: blue;">
hoge<br />
hoge<br />
hoge<br />
hoge<br />
hoge<br />
hoge<br />
hoge<br />
</div>
</div>
<div style="background-color: silver; width: 100%;">
hoge hoge hoge hoge<br />
hoge hoge hoge hoge<br />
</div>
</body>
↓結果↓
こんな感じでいけるっぽい。ポイントは、
・左のdivをfloat: left; にする。
・中央のdivをfloat: left; にする。
・右のdivをfloat: right; にする。
って感じです。
あとは、適切な幅…、ここでは20%, 55%, 20%にしましたが、ピクセル指定とかでもいいかもしれない。ぴったり20%, 60%, 20%で100%にしていないのはIEで表示が崩れるからで、* { margin: 0; padding: 0; } とかで回避出来そうだけど、また別途調べようかなと。
あとでこのへんのソースを調べてみよう。
