HTML をシンプルに保ちつつ、ブロック要素の段組みを実現する方法 パート2 | バシャログ。

「HTML をシンプルに保ったままブロック要素を段組みする方法」のパート 2 です。 前回の記事では、float と position の合わせ技により、全体の横幅ピッタリに要素を段組みしました。 今回は、position を使わない方法をご紹介します。 ボックスと余白の幅の値は前回と同じく以下です。 HTML ソースも前回と同じくこちら。無駄な ID や class のないシンプルなソースになっています。 <div id="photo"> <ul> <li><img src="hoge1.jpg" alt="サンプル1" width="160" height="120" /></li> <li><img src="hoge2.jpg" alt="サンプル2" width="160" height="120" /></li> <li><img src="hoge3.jpg" alt="サン

[chiha1980]

Movable Type,CSS,

[laconic]

ネガティブマージン

[yaoki_dokidoki]

勉強になるな

[qinmu]

CSS。

[shirotorabyakko]

写真間の余白があるため、段組みで表現するボックスul の横幅が親ボックス div#photo の横幅を超えてしまいますが、ul の margin にはみ出した分の値をネガティブ値で指定することにより、段組みが崩れるのを防いでいます。

[chips1029]

listのfloat時にマージン0用のclassつけずに並べる方法

[okosou]

floatの組み方

[tomoppe_day]

　シンプルなソースで写真を横並び

[tintoy]

ネガティブマージン

[nilab]

HTML をシンプルに保ちつつ、ブロック要素の段組みを実現する方法 パート2:* { /* デフォルトCSSのリセット */ margin: 0; padding: 0;}div#photo { width: 500px; /* 全体の横幅 */ height: 120px;}div#photo ul { width: 510px; height: 120px; margin-right: -10p

[nobud]

段組みをシンプルに

[gamenou]

シンプルで余白を作らない段組を作る方法

[abtky]

横並びの要素をスッキリコーディングするためのtips。li.rightとか使わなくて済む

[toton]

ネガティブマージンで削除

[Rewish]

casmさん:CSS関連Tipsのほとんどが、IE(特に6)を中心に考えられているからでは無いでしょうか。

[osktaka]

リストをfloatで横並びするときにネガティブマージン

[pitworks]

CSS

[akkun_choi]

ネガティブマージンで段組が崩れるのを防ぐ

[lesson5]

なんか前にみたことあるけどいちお

[kno]

「ul の margin にはみ出した分の値をネガティブ値で指定することにより、段組みが崩れるのを防いでいます。」

[aru-san]

liにマージン余白付けてulにネガティブマージンで差し引く

[kkeisuke]

ネガティブマージンで余った部分を削除するイメージ