html - 如何在特定宽度后将水平 block 级元素更改为垂直元素？

Question

我有三个<div>彼此相邻(水平)。现在我想在这之后将它们更改为相互跟随(垂直):

@media (max-width: 519px) { // all elements get vertical position }

默认情况下，它们会一步一步地在彼此之下，但我希望所有元素同时相互跟随。这里还有一个 fiddle ，你可以改变页面的宽度，你会看到第一个<div3>将被分解，如果您进一步减小页面宽度，您将看到 <div2>也会被打破。虽然我想同时分解它们(响应式 - 像网格一样)。

我该怎么做？

---

HTML:

<div class="one">div1</div>
<div class="two">div2</div>
<div class="three">div3</div>

CSS:

.one,.two,.three{
    border: 1px solid;
    float: left;
    margin: 5px;
    width: 25%;
    text-align: center;
    padding: 15px;
}

@media (max-width: 519px) { 
    .one,.two,.three{
        border: 1px solid red;
    }
}

Answer 1

大概您的意思是低于 520px 您希望它们垂直堆叠，但否则并排？我会这样做而不是漂浮。 (需要注意的是，你必须移除 CSS 代码中的 float: left;)

div { display: inline-block; }

@media (max-width: 519px) {
    div { display: block; }
}