CSS では、div はブロックレベルの要素です。デフォルトでは、各ブロックレベルの要素は 1 行の高さを占めます。ブロックレベルの要素が行に追加されると、他の要素を追加することはできません (float の後を除く)。 2 つのブロックレベル要素を連続して編集すると、それらは自動的に折り返されてページ上に表示されます。したがって、デフォルトでは 2 つの div を同じ行に表示することはできず、スタイル属性を使用して変更する必要があります。
解決策 1: display:inline を行レベルの要素に変換し、2 つの div が同じ行に配置されるようにします。
<div style="width:400px;height:300px;?border-width:1px;border-style:solid;border-color:#FFDEAD;"> <div style="background-color:#6495ED;width:100px;height:100px;display:inline;"></div> <div style="background-color:#C0FF3E;width:100px;height:100px;display:inline;"></div> <div style="background-color:#8A2BE2;width:100px;height:100px;display:inline;"></div></div>
解決策 2: float を使用する
<div style="width:700px;height:500px;?border-width:1px;border-style:solid;border-color:#FFDEAD;"> <div style="background-color:#6495ED;width:100px;height:100px;float:left;"></div> <div style="background-color:#C0FF3E;width:100px;height:100px;float:left;"></div> <div style="background-color:#C0FF3E;width:100px;height:100px;float:right;"></div> <!--必须清除浮动,才能换行--> <div style="background-color:#8A2BE2;width:100px;height:100px;clear:both;"></div></div>
inline を使用する デフォルトでは 2 つの div の間にギャップがあり、float を使用すると後続の div に影響するため、クリアする必要があります。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
