Question

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

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

默认情况下，它们会逐步互相攻击，但我希望所有元素同时跟随彼此。此处还有一个fiddle，您可以更改页面的宽度，您将在第一个<div3>中看到将会分解，如果您减少页面的宽度，您会看到{{1}也会崩溃。虽然我希望他们两个同时分解（响应 - 像网格一样）。

我该怎么做？

HTML：

<div2>

CSS：

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

Answer 1

据推测，您的意思是在520px以下，您希望它们垂直堆叠，而不是并排堆叠？我会这样做而不是漂浮。（应该注意，您必须删除CSS代码中的float: left;）

div { display: inline-block; }

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

Answer 2

您可以在媒体查询规则下将div的宽度设置为等于窗口的宽度。

＆＃13;

.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;
        width:100%; /*Check this*/
    }
}

＆＃13;

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

＆＃13;

检查jsFiddle here

Answer 3

将width: 100%添加到此处：

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

应该做这个工作吗？

Answer 4

关闭浮动：

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

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

4 个答案: