css 元素换行后有10PX间距，但最后一排没有。

如果你想要在每行 CSS 元素之间添加 10px 的间距，你可以使用 margin 属性。例如，你可以在你的 CSS 中使用如下代码：

.element {
  margin-bottom: 10px;
}

如果你想要最后一行没有间距，你可以使用 nth-child 或者 :last-child 伪类来为最后一行的元素清除 margin 属性。例如：

.element:last-child {
  margin-bottom: 0;
}

或者

.element:nth-child(n) {
  margin-bottom: 0;
}

希望这能帮到你。

相关问题

css 一排图片 如何自动换行

可以使用 CSS 的 flexbox 属性来实现一排图片自动换行。具体实现方法如下：

1. 在包含图片的容器上设置 display: flex; 和 flex-wrap: wrap; 属性，表示容器内的元素使用 flex 布局，并且当容器宽度不足时自动换行。

2. 设置图片元素的 flex 属性，控制图片在容器内的排列方式。可以使用 flex-grow、flex-shrink 和 flex-basis 属性来控制图片的伸缩性、收缩性和基准值。

例如，以下代码可以实现一排图片自动换行：

<div class="image-container">
  <img src="image1.jpg">
  <img src="image2.jpg">
  <img src="image3.jpg">
  <img src="image4.jpg">
  <img src="image5.jpg">
</div>

.image-container {
  display: flex;
  flex-wrap: wrap;
}

.image-container img {
  flex: 1 0 20%;
  margin: 10px;
}

这里设置了图片元素的 flex 属性为 1 0 20%，表示图片可以伸缩，但不可收缩，基准值为容器宽度的 20%。同时设置了图片元素的 margin 属性，控制图片之间的间距。

写一个布局，分为左右，中间有宽为30像素的间隔，左盒子有ul元素，ul里面有10个li元素，屏幕最大的时候排四个，屏幕宽度小于1200px,li元素一排排三个

以下是一个简单的布局示例，满足你的要求：

HTML 代码：

<div class="container">
  <div class="left">
    <ul>
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li>item 4</li>
      <li>item 5</li>
      <li>item 6</li>
      <li>item 7</li>
      <li>item 8</li>
      <li>item 9</li>
      <li>item 10</li>
    </ul>
  </div>
  <div class="middle"></div>
  <div class="right"></div>
</div>

CSS 代码：

.container {
  display: flex;
  align-items: stretch;
  height: 500px;
}

.left {
  flex: 1;
}

.middle {
  width: 30px;
  background-color: #ccc;
}

.right {
  flex: 1;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

li {
  width: calc(25% - 10px);
  margin-right: 10px;
  margin-bottom: 10px;
  background-color: #eee;
  text-align: center;
}

@media screen and (max-width: 1200px) {
  li {
    width: calc(33.33% - 10px);
  }
}

上述代码中，使用了 Flex 布局来实现左右两个盒子的等分排布。通过设置 `flex: 1` 属性，左右盒子的宽度会自适应屏幕大小。

中间的间隔使用了一个宽度为 30px 的 `div` 元素，并设置了背景色为灰色。

`ul` 元素中的 `li` 元素使用了 Flex 布局，通过设置 `flex-wrap: wrap` 属性，当屏幕宽度不够时，`li` 元素会自动换行。同时，根据设备屏幕大小，设置了不同的宽度和间距，从而实现了自适应布局。

在屏幕最大的情况下，`li` 元素一行排 4 个，在屏幕宽度小于 1200px 时，`li` 元素一行排 3 个。