CSS 如何使多个 DIV 元素在同一行显示但仍保留宽度

在本文中，我们将介绍如何使用 CSS 技巧将多个 DIV 元素在同一行显示，同时又保留各自的宽度。这在许多网页布局中非常实用，使得元素能够同时并排展示在页面上。

阅读更多：CSS 教程

使用浮动（float）属性

一种常见的方法是使用浮动（float）属性。通过给每个 DIV 元素添加 float: left; 属性，可以使它们在同一行显示。并且由于浮动属性的特性，它们会尽可能地紧靠在一起。

<style>
    .div-wrapper {
        overflow: hidden; /* 清除浮动 */
    }
    .div-item {
        float: left;
    }
</style>

<div class="div-wrapper">
    <div class="div-item" style="width: 200px;">DIV 1</div>
    <div class="div-item" style="width: 300px;">DIV 2</div>
    <div class="div-item" style="width: 150px;">DIV 3</div>
</div>

上述代码中，我们创建了一个包含多个 DIV 元素的容器 .div-wrapper，并为每个 DIV 元素设置了 .div-item 样式类。通过浮动属性，这些 DIV 元素会在同一行显示，并且保留了各自的宽度。

需要注意的是，为了确保容器能够正确包裹浮动元素，我们还需要给容器添加 overflow: hidden; 属性。这样可以避免浮动元素超出容器的情况。

使用 Flexbox

另一种方法是使用 Flexbox 弹性布局。Flexbox 是 CSS3 提供的一种布局模式，可以方便地实现多个元素在同一行显示，并控制它们的排列方式和占据空间的比例。

<style>
    .div-wrapper {
        display: flex;
    }
    .div-item {
        flex: 1;
    }
</style>

<div class="div-wrapper">
    <div class="div-item" style="width: 200px;">DIV 1</div>
    <div class="div-item" style="width: 300px;">DIV 2</div>
    <div class="div-item" style="width: 150px;">DIV 3</div>
</div>

上述代码中，我们创建了一个 .div-wrapper 容器，并将其显示属性设置为 display: flex;，从而启用了 Flexbox 布局。然后，给每个 DIV 元素设置了 .div-item 样式类，并通过 flex: 1; 属性使它们在同一行显示。

Flexbox 还提供了其他强大的布局属性，例如 flex-direction、justify-content 和 align-items，可以进一步控制元素的排列方式和对齐方式。这使得在实现复杂的页面布局时更加灵活和方便。

使用 Inline-block

还有一种常用的方法是使用 Inline-block。通过将 DIV 元素的 display 属性设置为 inline-block，可以使多个 DIV 元素像行内元素一样并排显示。

<style>
    .div-item {
        display: inline-block;
    }
</style>

<div>
    <div class="div-item" style="width: 200px;">DIV 1</div>
    <div class="div-item" style="width: 300px;">DIV 2</div>
    <div class="div-item" style="width: 150px;">DIV 3</div>
</div>