CodingMania

CodingMania

2011/3/13

floatを使ってコンテンツを2列にする

CSSのfloatを使ってボックスを2列横並びにします。

2ボックス目の右余白は、margin-right:-20px;でカットしています。

デモページへopen_in_new

HTMl

<div class="mod_Grid2Box ex-clearfix">

<div class="mod_Grid2Box_inner">
<h3>タイトル</h3>
<div class="mod_Grid2Box_inner_figure">
<img src="Grid_003.gif" width="150" height="132" alt="写真" />
<p class="mod_caption">キャプション</p>
<!-- mod_Grid2Box_inner_figure_end --></div>
<p>説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。</p>
<!-- mod_Grid2Box_inner_end --></div>

<div class="mod_Grid2Box_inner">
<h3>タイトル</h3>
<div class="mod_Grid2Box_inner_figure">
<img src="Grid_003.gif" width="150" height="132" alt="写真" />
<p class="mod_caption">キャプション<br />
改行してみました。</p>
<!-- mod_Grid2Box_inner_figure_end --></div>
<p>説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。</p>
<!-- mod_Grid2Box_inner_end --></div>

<!--mod_Grid2Box_end --></div>

CSS

.mod_Grid2Box{
	width:720px;
	margin-right:-20px;
}
.mod_Grid2Box_inner{
	width:340px;
	float:left;
	margin:0 20px 10px 0;
}
.mod_Grid2Box_inner_figure{
	width:150px;
	float:left;
	margin:0 20px 5px 0;
}
.mod_Grid2Box_inner h3{
	margin:0 0 5px 0;
	font-weight: bold;
	font-size: 1.4em;
	border-bottom:double 3px #000;
}
.mod_caption{
	color:#666;
}

© CodingMania.net