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_Grid 2 Box{ width : 720px ; margin-right : -20px ; } .mod_Grid 2 Box_inner{ width : 340px ; float : left ; margin : 0 20px 10px 0 ; } .mod_Grid 2 Box_inner_figure{ width : 150px ; float : left ; margin : 0 20px 5px 0 ; } .mod_Grid 2 Box_inner h 3 { margin : 0 0 5px 0 ; font-weight : bold ; font-size : 1.4em ; border-bottom : double 3px #000 ; } .mod_caption{ color : #666 ; } |