How does css make three div side by side?

This article mainly introduces "how css makes three div side by side". In daily operation, I believe many people have doubts about how css makes three div side by side. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the question of "how css makes three div side by side". Next, please follow the editor to study!

Css makes the three div side by side: 1, set "display:inline;" or "display:inline-block;" style to the three div elements; 2, use the float attribute to float the three div elements, and the syntax "float:left;".

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

Div is a block element, which is displayed on a single row by default:

So how do you make these three div display side by side? There are two ways to do this. Let's introduce them to you:

1. Use the display attribute

Set all three div 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;, there needs to be content in the div, otherwise the div cannot be stretched out.

2. Use the float attribute

Float the three div

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

At this point, the study of "how to make the three div side by side with css" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!