容器内有多个DIV元素，有没有办法在换行的时候才增加margin-top

可以使用CSS中的伪类选择器`:first-of-type`来选择容器内的第一个DIV元素，给它设置`margin-top`，就可以在换行的时候增加margin-top了。

例如：

<div class="container">
  <div>第一个元素</div>
  <div>第二个元素</div>
  <div>第三个元素</div>
</div>

.container div:first-of-type {
  margin-top: 20px;
}

这样就可以只在第一个元素前添加margin-top，而不会影响其他元素。

相关问题

你没明白我的意思，原本这几个元素是并排的，但是由于宽度不够会缩小，那就换行了，我想在换行后增加margin-top

抱歉，我理解有误。对于你的情况，可以使用CSS中的`@media`查询和`nth-child`选择器来实现。

首先，使用`@media`查询检测屏幕宽度是否小于你希望的阈值，然后使用`nth-child`选择器选择每一行第一个元素，给它设置`margin-top`。

例如：

<div class="container">
  <div>第一个元素</div>
  <div>第二个元素</div>
  <div>第三个元素</div>
  <div>第四个元素</div>
  <div>第五个元素</div>
  <div>第六个元素</div>
</div>

.container div {
  float: left;
  width: 33.33%;
  box-sizing: border-box;
  text-align: center;
  border: 1px solid black;
  padding: 10px;
}

@media (max-width: 768px) {
  .container div:nth-child(3n+1) {
    margin-top: 20px;
  }
}

在上面的例子中，当屏幕宽度小于768px时，每一行的第一个元素就会有20px的margin-top。你可以根据实际情况修改媒体查询和nth-child选择器的条件。

vue实现一行有2个div，多出换行

您可以使用 CSS 中的 `flexbox` 布局来实现这个要求。

首先，将包含这两个 `div` 元素的父元素设置为 `display: flex`，并且设置 `flex-wrap: wrap`，这样当子元素宽度超出父元素宽度时，就会自动换行。

然后，设置子元素的宽度为父元素宽度的一半，即 `width: 50%`，这样每行就会有两个子元素。

最后，您可以通过调整 `div` 元素的样式来实现您想要的布局。

以下是示例代码：

HTML:

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

CSS:

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

.box {
  width: 50%;
  height: 100px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}