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

Question

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

3

我有三个水平排列在一起的<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;
    }
}

- Shafizadeh

值得一提的是，根据类的预期使用，可能更适合您的需求将一个类封装为一个类来实现三个div的堆叠功能，而不是在CSS中列出所有三个类。从那里开始，如果需要，您可能需要使用ID为各个元素添加方面（或甚至为每个元素添加独特的第二个类，如果您希望样式也适用于其他地方）。 - brads3290

@BradSullivan 感谢您的留言。实际上，这个 fiddle 只是一个测试。但是，您说得对，在这种情况下使用一个类更易读、更容易理解。 - Shafizadeh

4个回答

4

您的意思是当屏幕宽度小于 520px 时，您希望它们垂直堆叠，否则并排显示？我建议使用此方法代替浮动。(需要注意的是，在您的 CSS 代码中，必须删除 float: left; )

div { display: inline-block; }

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

- Klors

1

@Sajad 没问题，你也可以看一下 flexbox，在这种并排元素的情况下非常有用 https://css-tricks.com/snippets/css/a-guide-to-flexbox/ - Klors

1

将 width: 100% 添加到这个元素中：

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

那应该可以完成工作了？

- Jeroen Bellemans

谢谢，这个解决方案改变了元素的“宽度”，但是这是一个好主意。+1 - Shafizadeh

1

只需关闭浮动：

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

- Tor-Erik

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- aagjalpankaj · Accepted Answer

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

.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*/
    }
}

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

在这里检查jsFiddle：点击这里