HTML 如何将3个div并排对齐

在本文中，我们将介绍如何使用HTML将3个div元素并排排列在一行上。

阅读更多：HTML 教程

使用float属性

可以通过使用CSS的float属性来实现3个div并排对齐的效果。为了实现这个效果，我们需要为每个div设置一个相同的宽度，并将它们的float属性设置为left。下面是一个示例：

<style>
    .box {
        width: 300px;
        float: left;
        border: 1px solid black;
        padding: 10px;
    }
</style>

<div class="box">
    <h3>Box 1</h3>
    <p>这是第一个盒子。</p>
</div>

<div class="box">
    <h3>Box 2</h3>
    <p>这是第二个盒子。</p>
</div>

<div class="box">
    <h3>Box 3</h3>
    <p>这是第三个盒子。</p>
</div>

在上面的示例中，我们创建了一个名为.box的类，它设置了盒子的宽度、边框样式以及内边距。通过设置float为left，我们将这3个div元素并排在一行上。

使用display属性

另一种方法是使用CSS的display属性。我们可以将父元素设置为flex，并将子元素的display属性设置为inline-block。下面是一个示例：

<style>
    .container {
        display: flex;
    }
    .box {
        width: 300px;
        border: 1px solid black;
        padding: 10px;
        display: inline-block;
    }
</style>

<div class="container">
    <div class="box">
        <h3>Box 1</h3>
        <p>这是第一个盒子。</p>
    </div>

    <div class="box">
        <h3>Box 2</h3>
        <p>这是第二个盒子。</p>
    </div>

    <div class="box">
        <h3>Box 3</h3>
        <p>这是第三个盒子。</p>
    </div>
</div>

在上面的示例中，我们创建了一个名为.container的类，将其display属性设置为flex。然后，我们将.box类的display属性设置为inline-block，使得这3个div元素并排在一行上。

使用CSS Grid布局

CSS Grid布局是一种强大的排版方式，它可以轻松地将元素进行网格化布局。我们可以使用CSS grid来实现3个div并排对齐。下面是一个示例：

<style>
    .container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
    .box {
        border: 1px solid black;
        padding: 10px;
    }
</style>

<div class="container">
    <div class="box">
        <h3>Box 1</h3>
        <p>这是第一个盒子。</p>
    </div>

    <div class="box">
        <h3>Box 2</h3>
        <p>这是第二个盒子。</p>
    </div>

    <div class="box">
        <h3>Box 3</h3>
        <p>这是第三个盒子。</p>
    </div>
</div>