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

【问题标题】：How to change horizontal block-level elements to vertical elements after specific width?如何在特定宽度后将水平块级元素更改为垂直元素？
【发布时间】：2023-04-04 06:03:01
【问题描述】：

我有三个彼此相邻（水平）的<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;
    }
}

【问题讨论】：

可能值得注意的是，根据类的预期用途，使用一个类来封装三个 div 的堆叠功能可能更适合您的需求，而不是在 CSS 中列出所有三个类.如有必要，您可能希望从那里使用 ID 为各个元素添加方面（如果您希望样式也适用于其他地方，甚至可以为每个元素添加唯一的第二个类）。
@BradSullivan 感谢您的来信。其实这个小提琴只是一个测试。但是，是的，你是对的，在这种情况下，使用一个类更具可读性和更容易。

标签： html css gridview responsive-design

【解决方案1】：

大概您的意思是在520px 下方，您希望它们垂直堆叠，否则并排？我会这样做而不是浮动。（需要注意的是，您必须在 CSS 代码中删除 float: left;）

div { display: inline-block; }

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

【讨论】：

@Sajad 没问题，你也可以看看在这些并排元素的情况下非常有用的弹性盒子css-tricks.com/snippets/css/a-guide-to-flexbox

【解决方案2】：

媒体查询规则下可以设置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 here

【讨论】：

是的，这个答案与 Jeroen Bellemans 的答案完全相同。但是好的，+1。
@Sajad：如果你想快速开发responsive web页面，你可以使用Bootstrap。

【解决方案3】：

将width: 100% 添加到此：

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

这应该可以完成这项工作吗？

【讨论】：

谢谢，这个解决方案改变了元素的width，但这是个好主意。 +1

【解决方案4】：

只需关闭浮动：

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

【讨论】：