Warning: Trying to access array offset on value of type bool in /home/yotigory/codingmania.net/public_html/wp-content/plugins/search-everything/config.php on line 29
floatを使ってコンテンツを2列にする - CodingMania
menu

2011/3/13

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

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

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

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;
}