三个div之间的行css、html

三个div之间的行可以通过CSS的布局属性来控制。以下是一种常见的方法：

使用浮动（float）属性：
- 在CSS中，给每个div设置float: left;属性，使它们都浮动在左侧。
- 可以通过设置width属性来控制每个div的宽度。
- 如果需要清除浮动，可以在最后一个div后面添加一个空的元素，并给它设置clear: both;属性。

示例代码：

<style>
    .div-container {
        width: 100%;
    }

    .div {
        float: left;
        width: 33.33%;
        height: 100px;
        background-color: #ccc;
    }

    .clear {
        clear: both;
    }
</style>

<div class="div-container">
    <div class="div"></div>
    <div class="div"></div>
    <div class="div"></div>
    <div class="clear"></div>
</div>

使用Flexbox布局：
- 在CSS中，给父容器设置display: flex;属性，使其成为一个Flex容器。
- 可以通过设置flex属性来控制每个div的宽度和比例。
- 默认情况下，Flex容器的子元素会在一行上排列，可以通过设置flex-wrap: wrap;属性来使其换行。

示例代码：

<style>
    .div-container {
        display: flex;
        flex-wrap: wrap;
    }

    .div {
        flex: 1 0 33.33%;
        height: 100px;
        background-color: #ccc;
    }
</style>

<div class="div-container">
    <div class="div"></div>
    <div class="div"></div>
    <div class="div"></div>
</div>

使用Grid布局：
- 在CSS中，给父容器设置display: grid;属性，使其成为一个Grid容器。
- 可以通过设置grid-template-columns属性来控制每个div的宽度和列数。
- 默认情况下，Grid容器的子元素会在一行上排列，可以通过设置grid-auto-rows属性来控制每行的高度。

示例代码：

<style>
    .div-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 100px;
        grid-gap: 10px;
    }

    .div {
        background-color: #ccc;
    }
</style>

<div class="div-container">
    <div class="div"></div>
    <div class="div"></div>
    <div class="div"></div>
</div>

以上是三种常见的方法来实现三个div之间的行布局。具体选择哪种方法取决于具体的需求和设计。