スポンサーサイト

このエントリーをはてなブックマークに追加

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

【HTML】floatで段組をつくる

このエントリーをはてなブックマークに追加

small_106960641.jpg
どうも。参謀です。

相変わらず私のHTMLに関するスキルは初心者、いや門前払い程度ですが、
そんなことはお構いなしに代表から色々な修正依頼がやってきます。

全然たいした内容ではないのですが、
貴重な日曜日の2時間を費やした内容を覚書として残しておきます。
貴重な日曜日の2時間を費やした内容を覚書として残しておきます。

大事なことなので2回書きました。
結果として、こういう感じでした。



HTMLソース

<div id="hidari">
左側の箱
</div>
<div id="migi">
右側の箱
</div>


CSS

#hidari {width: 280px;
float: left}
#migi {width:450px;
float: left;
margin: 0 0 0 20px}





ポイント的な
・floatを使うときは、ちゃんとwidthで横幅を指定する。
(左、右どちらの箱にも)
・わかりにくいけど、左、右どちらの箱もfloat=:leftで左に寄っとけ、としておく。
(これは仕様のため。わかりにくい)
・marginで隙間を入れておかないと、左右の箱が密着して読みにくい。

で、どのページにコレを使ったかっていうとまだ公開できないんですが。


photo credit: kk+ via photopin cc

コメント

No title

なんとなく、参考になりました。
なんとなく。

2012年10月24日13:30 from なむURL

非公開コメント

トラックバック

http://backyardsomething.blog.fc2.com/tb.php/54-4055ac62

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。