スポンサーサイト

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

HTML をシンプルに保ちつつ、ブロック要素の段組みを実現する方法

写真間のmarginだけにして、両端のmarginは省く方法

#HTML

<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="サンプル3" width="160" height="120" /></li>
</ul>
</div><!-- /#photo -->


#css

* { /* デフォルトCSSのリセット */
margin: 0;
padding: 0;
}
div#photo {
width: 500px; /* 全体の横幅 */
height: 120px;
}
div#photo ul {
width: 510px;
height: 120px;
margin-right: -10px; /* ここがポイント! */
list-style-type: none;
}
div#photo li {
float: left; /* floatで段組み */
width: 160px;
height: 120px;
margin-right: 10px; /* 写真間の余白 */
}


参考サイトはコチラ
スポンサーサイト

トラックバック

コメント

コメントを残す

Secret


プロフィール

U2K

Author:U2K
いろいろプログラムに関しての覚え書きをちょくちょくと書いていきます。

オススメ










オススメ

忍者AdMax

u2k on Twitter

最近の記事


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