如何并排排列div元素？

html5html

在HTML中，要使div元素并排排列，你通常需要用到CSS的display属性，特别是display: inline-block;或display: flex;。以下是两种常见的方法来实现div元素的并排排列，并使用一个HTML文件给出示例说明。

方法一：使用display: inline-block;

在CSS中，你可以将div元素的display属性设置为inline-block，这样它们就会像内联元素（如span）一样并排显示，但同时又保持块级元素的特性（如可以设置宽度和高度）。

示例效果与源代码：

运行效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Divs 并排排列</title>
<style>
  .inline-block-divs {
    display: inline-block;
    width: 30%; /* 根据需要调整 */
    margin: 1%; /* 为了显示间距 */
    background-color: #f0f0f0; /* 为了看得更清楚 */
    text-align: center; /* 文本居中显示 */
  }
</style>
</head>
<body>
  <div class="inline-block-divs">Div 1</div>
  <div class="inline-block-divs">Div 2</div>
  <div class="inline-block-divs">Div 3</div>
</body>
</html>

在这个例子中，我们创建了一个名为.inline-block-divs的CSS类，该类将display属性设置为inline-block，并为div元素设置了一些其他样式属性（如宽度、边距和背景色）。然后，在HTML中，我们创建了三个带有这个类的div元素，它们会并排显示在页面上。

方法二：使用Flexbox（display: flex;）

Flexbox是一个更现代的布局模式，它允许你更容易地设计复杂的布局结构，包括并排排列的元素。

示例效果与源代码：

运行效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Divs 并排排列</title>
<style>
  .flex-container {
    display: flex; /* 使用Flexbox */
    justify-content: space-between; /* 子元素之间的空间分布 */
  }
  .flex-item {
    flex: 1; /* 弹性增长因子，这里表示所有子元素等宽 */
    margin: 1%; /* 为了显示间距 */
    background-color: #f0f0f0; /* 为了看得更清楚 */
    text-align: center; /* 文本居中显示 */
  }
</style>
</head>
<body>
  <div class="flex-container">
    <div class="flex-item">Div 1</div>
    <div class="flex-item">Div 2</div>
    <div class="flex-item">Div 3</div>
  </div>
</body>
</html>

在这个例子中，我们创建了一个名为.flex-container的Flex容器，它包含三个.flex-item子元素。通过设置display: flex;，我们告诉浏览器使用Flexbox来布局这些元素。我们还使用了一些Flexbox属性（如justify-content和flex）来进一步控制元素的布局。在这个例子中，所有子元素都会等宽并排显示，并在它们之间有一些间距。

上一篇：Canvas怎么绘制三角形？

下一篇：Canvas如何绘制折线？