css中三个div排列

在开发网页过程中，我们通常会使用CSS来控制HTML元素的样式。其中，排列是一个常见的问题。在本文中，我们将学习如何使用CSS将三个元素水平排列。

    style>
    .container {
          display: flex;
 /* 声明 flex 布局 */    }
    .item {
          width: 100px;
          height: 100px;
          margin-right: 10px;
     /* 设置元素间距 */      background-color: #f00;
    }
    .item:last-child {
          margin-right: 0;
 /* 设置最后一个元素的间距为 0 */    }
      /style>
      div class="container">
        div class="item">
    /div>
        div class="item">
    /div>
        div class="item">
    /div>
      /div>
      

如上代码所示，我们使用了flex布局来实现元素的水平排列。容器元素的display属性被设置为flex，它的子元素们（.item）就成为了flex子项。

每个子项的宽度为100px，高度为100px。它们之间有10px的空白间距，为了不让最后一个元素多出来一点间距。我们使用了:last-child伪类来将最后一个元素的margin-right设置为0。

以上代码可以很好地解决了三个元素的水平排列问题。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！