Web Materia BLOG

ウェブマテリアブログ

Apr

01

2015

0

COMMENTS

スマホサイトで画像やコンテンツを均等に並べるCSS

Category:CSS

スマホサイトで画像やコンテンツを均等に並べるCSS
スマートフォンサイトではPCサイトと違いコンテンツや画像の横幅を様々なディスプレイサイズに対応させる為に特定の数値に指定する事は余りしません。   つまり可変される画像やコンテンツのでも常に均等に配置するCSSをご紹介します。  
li{
     width:25%;
     float:left;
     box-sizing :border-box;
}
  これですとli要素の中身を4列ずつに均等に配置するレイアウトになります。 逆に2列にするにはwidthを50%にするなど列数に応じて%を変更して下さい。   このようにスマホサイトなどで横並びの配置を行う場合はbox-sizingのタグを多様する事が一般的です。

Comments

comments



Archive

Category


PageTOPへ