キレイにdiv要素を横並びにするCSSサンプル

WordPress

2016.08.26

キレイにdiv要素を横並びにするCSSサンプルです。

.cap{margin:2em 0 2.5em; padding:1em 1.5em;line-height:2.0; border:1px dashed #cdcdcd; background:#fcfcfc;  box-shadow: 0 1px 3px 0 rgba(195,195,195,0.3);}
.cap br{clear:both;}
/*小さいデバイスでは横に並べる数を変更*/
@media screen and (max-width: 600px){
    .cap{
    width:100%
    }
}
@media screen and (min-width: 601px){
.wrap{display:table;margin-bottom:20px;}
.cap{
    width:500px;
    display:table-cell;
}
}

.cap{margin:2em02.5em;padding:1em1.5em;line-height:2.0;border:1pxdashed#cdcdcd; background:#fcfcfc; box-shadow: 0 1px 3px 0 rgba(195,195,195,0.3);}

.capbr{clear:both;}

/*小さいデバイスでは横に並べる数を変更*/

@mediascreenand(max-width:600px){

.cap{

width:100%

}

@mediascreenand(min-width:601px){

.wrap{display:table;margin-bottom:20px;}

.cap{

width:500px;

display:table-cell;

}

キレイにdiv要素を横並びにするCSSサンプル

コメント

カテゴリー別人気記事

お知らせ

お知らせ