文字の画像(イメージ)化
cman.jp cman.jp > パーツ作成メニュー > BOXのデザイン > DIVの横並び

CSSでDIVを横並びにする色々な方法

htmlの「div」などブロック要素を横に並べる場合、多くのケースで「float:left」が利用されます。「float:left」は「横並び+中央寄せ」が出来ないなど使い勝手はよくありません。
FlexBox「display:flex」やインラインブロック「display:inline-block」を使用すると中央寄せなども可能となります。

FlexBox
左右・中央および均等割り当ても可能です。また、親要素の幅に合わせて各DIVの幅を自動調整することもできます。
横方向だけでなく縦方向も柔軟な位置指定が可能です。詳しくは「flexboxの機能一覧」でご確認ください。
float
DIVを左からまたは右から並べることが出来ます。各DIV毎に左右の指定が可能なため、「このDIVは"右"、このDIVは"左"」などの指定は可能ですが、中央寄せなどの機能はありません。
inline-block
1つのDIVを1文字と考えた並びとなります。このため、並び順は「text-align」を使用します。そのた「line-height」や「line-height」などのテキストに適用されるCSSも反映されますので注意が必要です。

DIVの横並びを変更して見よう

使用するhtmlは同じですが、「flex」「float」「inline-block」で生成されるCSSは異なりますので、いろいろお試しください。

位置調整で使用するCSS
並び順など
幅による並びの違いを表すため、横幅を自動で動かしています
1
2
3
4
5
使用したhtml
<div class="box" id="makeImg">
  <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
生成したCSS
 /* --- 外枠の定義 ---------------------------------------------*/
.box {
  margin         : auto;                 /* サンプル用 中央寄せ */
  box-sizing     : border-box;           /* 罫線も含む長さ      */
  background     : #fff;                 /* BOXの背景色         */
  border         : 1px solid #666;       /* 枠線の指定          */
  width          : 280px;                /* BOXの幅             */
  max-height     : 210px;                /* BOXの高さ           */
  animation: boxAnime 10s linear infinite alternate;
 /* ▼ FlexBoxの定義 */
  display        : flex;                 /* FlexBox定義         */
  flex-wrap      : wrap;                 /* 折り返し定義        */
}
 /* --- サンプル確認用の親枠幅アニメーション ------------------ */
 /*     (BOXの並びには関係ありません)                           */
@keyframes boxAnime{
   0% { width : 280px }
  40% { width : 280px }
  60% { width : 150px }
 100% { width : 150px }
}
 /* --- 個別のBOXの定義 --------------------------------------- */
.box div {
  box-sizing     : border-box;           /* 罫線も含む長さ      */
  background     : #B0C4DE;              /* BOXの背景色         */
  border         : 2px solid #35557f;    /* 枠線の指定          */
  width          : 60px;                 /* サンプルBOXの幅     */
  height         : 60px;                 /* サンプルBOXの幅     */
  margin         : 2px;                  /* サンプルBOXの間     */
 /* ▼ FlexBoxの各ボックス均等自動幅 */
  flex-grow      : 1;                    /* 各BOXを均等に割当て */
}

flexboxについては、以下をご確認ください。
flexboxの機能一覧

DIV内の文字縦位置は、以下をご確認ください。
ブロック要素で縦中央揃えなどの文字位置指定するCSS

ページTOP
広告
広告
広告

生成できるホームページ・パーツ一覧
ご利用時の注意事項・制約事項
よくあるご質問
何で無料なの?
生成コードに利用制限はある?
生成コードに保証はある?
jQueryで生成できない?

広告
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット
運営:株式会社シーマン