html怎么让多个div在同一行

作者：以往沧海发布日期:2026-06-09 浏览:76

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 使用 display: inline-block 让多个 div 在同一行 */
        .inline-div {
            display: inline-block;
            width: 100px;
            height: 100px;
            margin: 5px;
            background-color: lightblue;
        }

        /* 或者使用 flex 布局 */
        .flex-container {
            display: flex;
        }
        .flex-item {
            width: 100px;
            height: 100px;
            margin: 5px;
            background-color: lightcoral;
        }
    </style>
</head>
<body>

    <!-- 使用 inline-block -->
    <div>
        <div class="inline-div">Div 1</div>
        <div class="inline-div">Div 2</div>
        <div class="inline-div">Div 3</div>
    </div>

    <!-- 使用 flex 布局 -->
    <div class="flex-container">
        <div class="flex-item">Div 4</div>
        <div class="flex-item">Div 5</div>
        <div class="flex-item">Div 6</div>
    </div>

</body>
</html>

解释说明：

使用 display: inline-block：通过设置 display: inline-block，可以让多个 div 元素在同一行显示。每个 div 的宽度和高度可以自定义，并且可以通过 margin 来调整间距。
使用 flex 布局：通过将父容器的 display 设置为 flex，所有子元素（即 div）会默认在同一行排列。flex 布局提供了更强大的布局控制能力，适合复杂的布局需求。

上一篇：html文件查看器

下一篇：html select onchange