How to display two divs side by side

Methods are: 1. Set the two div elements to the "float:left;" attribute; 2. Use CSS's flex layout to easily display elements side by side; 3. You can also use CSS's grid layout Implement side-by-side display of elements.

To display two divs side by side, you can use the following methods:

Use the float attribute in CSS, you can use the float attribute to display two divs side by side. The div elements are set to float:left; so that they appear side by side. The sample code is as follows:

 
 
Div 1
 
Div 2
 

Use grid layout: Using CSS grid layout can also display elements side by side. Set the display attribute of the parent element to grid, and set the grid-column attribute of the child element to control the position of the child element in the grid. The sample code is as follows:

 
 
Div 1
 
Div 2
 

The above are three commonly used methods. You can choose the appropriate method according to the specific situation to achieve side-by-side display of two divs.

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