CSS solution to display two DIVs on the same line_html/css_WEB-ITnose

In CSS, div is a block-level element. Each block-level element occupies one row of height by default. Once a block-level element is added to a row, other elements cannot be added (except after float). When two block-level elements are edited continuously, they will automatically wrap and display on the page. So by default, two divs cannot be displayed on the same line and must be modified through style attributes.

Solution 1: display:inline, turn it into a row-level element, so that the two divs will be on the same line.

<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>

Solution 2: Use 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>

Use inline, there is a gap between 2 divs by default The gaps will not stick together exactly; using float will affect subsequent divs and must be cleared through clear.