CSS multiple divs side by side
Multiple divs side by side with CSS
In web page layouts, you often need to display multiple div elements horizontally side by side. This article will introduce how to use CSS to achieve horizontal alignment of multiple div elements and provide detailed example code.
Using the float property to achieve horizontal alignment
Using the float property to display multiple div elements horizontally. Here is a simple example code:
<!DOCTYPE html>
html>
<head>
<style>
.div {
width: 100px;
height: 100px;
background-color: #f1f1f1;
float: left;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="div">Div 1</div>
<div class="div">Div 2</div>
<div class="div">Div 3</div>
</body>
</html>
Output:
In the example above, we define a style for a class called div and set the width, height, background color, and float:left properties. This allows the three div elements to be displayed horizontally.
Using display: inline-block to achieve horizontal alignment
Another common method is to use the display: inline-block property. Here is a sample code:
<!DOCTYPE html>
<html>
<head>
<style>
.div {
width: 100px;
height: 100px;
background-color: #f1f1f1;
display: inline-block;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="div">Div 1</div>
<div class="div">Div 2</div>
<div class="div">Div 3</div>
</body>
</html>
Output:
In the example above, we also defined a style for a div class, setting the width, height, background color, and the display:inline-block property. This also allows multiple div elements to be displayed horizontally.
Horizontal Alignment with Flexbox
Flexbox is a powerful layout method that makes it easy to arrange multiple elements horizontally or vertically. Here’s an example using flexbox to achieve horizontal alignment:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
}
.div {
width: 100px;
height: 100px;
background-color: #f1f1f1;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="div">Div 1</div>
<div class="div">Div 2</div>
<div class="div">Div 3</div>
</div>
</body>
</html>
Output:
In the example above, we define a container element with the class container and set the display:flex property. We then place three DIV elements within the container, allowing the DIV elements to be displayed horizontally.
Using Grid Layout to Achieve Horizontal Arrangement
CSS Grid layout is a powerful layout method that can achieve complex grid layouts. Here’s an example code for using a grid layout to achieve horizontal arrangement:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
.div {
width: 100px;
height: 100px;
background-color: #f1f1f1;
}
</style>
</head>
<body>
<div class="container">
<div class="div">Div 1</div>
<div class="div">Div 2</div>
<div class="div">Div 3</div>
</div>
</body>
</html>
Output:
In the above example, we define a container element with the class container and set the display:grid and grid-template-columns properties. This allows multiple DIV elements to be arranged horizontally, while also allowing for flexible control over the width of each element.
Through the above example code, we’ve demonstrated how to use float, inline-block, flexbox, and grid layouts to horizontally arrange multiple DIV elements. Choosing the appropriate layout method based on your needs can easily achieve your web page layout requirements.