How to make three divs side by side with css

Css method to make three divs side by side: 1. Set the "display:inline;" or "display:inline-block;" style to the three div elements; 2. Use the float attribute to make the three divs The element is floated with the syntax "float:left;".

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

div is a block element, which is displayed on its own line by default:

<div></div>
<div></div>
<div></div>

So how do you make these three divs display side by side? There are two methods. Let me introduce them to you below:

1. Use the display attribute

to set all three divs to display:inline;or display:inline-block;

div{
	width: 100px;
	height: 20px;
	border: 1px solid red;
	display:inline-block;
}

Note: When set to display:inline;, it is required in the div There is content, otherwise the div cannot be opened.

2. Use the float attribute

to float the three divs

div{
	width: 100px;
	height: 20px;
	border: 1px solid red;
	float:left;
}

(Learning video sharing: css video tutorial)

The above is the detailed content of How to make three divs side by side with css. For more information, please follow other related articles on the PHP Chinese website!