CSS多个div并排|极客教程

CSS多个div并排

在网页布局中，经常会遇到需要将多个div元素水平并排显示的情况。本文将介绍如何使用CSS实现多个div元素的水平排列，并提供详细的示例代码。

使用float属性实现水平排列

使用float属性可以让多个div元素水平排列显示。下面是一个简单的示例代码：

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

CSS多个div并排

在上面的示例中，我们定义了一个class为div的样式，设置了宽度、高度、背景颜色以及float:left属性。这样就可以让三个div元素水平排列显示。

使用display: inline-block实现水平排列

另一种常用的方法是使用display: inline-block属性。下面是一个示例代码：

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

CSS多个div并排

在上面的示例中，我们同样定义了一个class为div的样式，设置了宽度、高度、背景颜色以及display:inline-block属性。这样也可以实现多个div元素水平排列显示。

使用flexbox实现水平排列

Flexbox是一种强大的布局方式，可以轻松实现多个元素的水平或垂直排列。下面是一个使用flexbox实现水平排列的示例代码：

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

CSS多个div并排

在上面的示例中，我们定义了一个class为container的容器元素，并设置display:flex属性。然后在容器内放置了三个div元素，这样就可以实现多个div元素水平排列显示。

使用grid布局实现水平排列

CSS Grid布局是一种强大的布局方式，可以实现复杂的网格布局。下面是一个使用grid布局实现水平排列的示例代码：

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

CSS多个div并排