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>

css中三个div排列

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

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

以上代码可以很好地解决了三个

元素的水平排列问题。

上一篇：css 倒数第几个下一篇：css 超出隐藏省略号

css中三个div排列

相关文章