キレイに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;
}
}