2 つの DIV を同じ行に表示する CSS ソリューション_html/css_WEB-ITnose

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 に影響するため、クリアする必要があります。