ヒント：divを分割する理由によっては、インラインレベルの要素であり、デフォルトの動作が変更されない限り次の行に分割されないタグの使用も検討する必要があります。
注：これらの例をすべてのタイプのコンピューターユーザーにとって使いやすく理解しやすくするために、divのstyle属性を使用しています。 複数のページでこれらの例のいずれかを使用する予定の場合は、ファイル内のスタイル設定を使用してキャッシュ可能なCSSファイルを作成することを強くお勧めします。
以下の例では、divがどの程度のスペースを占めているか、およびdivが画面上のどこに配置されているかを示すのに役立つように、divを異なる色で表示します。
デフォルトの動作
以下は、ブロック要素Div 1が、それを含む要素の最初の行を占め、その後に2番目のDiv 2が続く場合のデフォルトのdiv動作の例です。
一人称
部2
Div one Div two
Div 1のサイズを縮小して他のdivのためのスペースを空けたとしても、それらはブロック要素であるため、 Div 1とDiv 2の下にDiv 2の隣にスペースが残されます。 divを次の行に移動するには、両方のdivが以下に示すようにインラインブロック表示設定を持つ必要があります。
一人称
部2
Div one Div two
以下は3列divのいくつかの異なる例です。 まず、以下の3列のdivは、divを追加すること以外は上記の例と同じ考え方に従います。
一人称
部2
第3部
Div 1 Div 2 Div 3
もちろん、divが包含要素の100％を占めるようにしたい場合は、少しトリッキーになります。 以下は、要素の100％を占める3つのdivを隣同士に作成する方法の一例です。 以下の例では、inline-blockを使用してすべてのdivを同じ行に配置するのではなく、左右のdivを浮動させています。
一人称
第3部
部2
Div One DIV THIV Div 2
ヒント：上記の3 div列の例では、div 3を非表示にして幅を調整するなどの追加のカスタマイズをレスポンシブに使用していますが、スタイルに追加することもできます。