我有三个水平排列在一起的<div>元素。现在我需要让它们垂直排列,如下所示:
@media (max-width: 519px) { // all elements get vertical position }
默认情况下,它们将逐步排列在彼此下方,但我希望所有元素同时跟随。此外,这里还有一个演示,您可以更改页面的宽度,在第一个
<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;
}
}