你没明白我的意思,原本这几个元素是并排的,但是由于宽度不够会缩小,那就换行了,我想在换行后增加margin-top
时间: 2024-01-29 21:03:06 浏览: 137
行元素并排
抱歉,我理解有误。对于你的情况,可以使用CSS中的`@media`查询和`nth-child`选择器来实现。
首先,使用`@media`查询检测屏幕宽度是否小于你希望的阈值,然后使用`nth-child`选择器选择每一行第一个元素,给它设置`margin-top`。
例如:
```html
<div class="container">
<div>第一个元素</div>
<div>第二个元素</div>
<div>第三个元素</div>
<div>第四个元素</div>
<div>第五个元素</div>
<div>第六个元素</div>
</div>
```
```css
.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选择器的条件。
阅读全文