响应式设计 css dom 元素操作答案

【问题标题】：Responsive design css dom element manipulation响应式设计 css dom 元素操作
【发布时间】：2014-06-08 20:05:16
【问题描述】：

我有一个包含输入元素和标签元素的 div 字段。两者都是 display: block

<div class="cf-full">
    <input id="a" >
    <label class="helptext"</label>
</div>

所以在普通视图中，输入字段会排在第一位。但是，我希望布局具有响应性，以便在移动设备中首先显示标签。

我知道这种 DOM 操作可以通过 javascript 轻松实现。但是有没有办法通过纯 css 实现反向 DOM 元素顺序？

【问题讨论】：

标签： html css dom responsive-design

【解决方案1】：

是的：您正在尝试这样的事情：（您可以在 jsfiddle 中调整视口的大小以查看会发生什么）http://jsfiddle.net/SuWLr/

<style type="text/css">
.cf-full input,
.cf-full label{
    float:left;
}
@media all and (max-width: 300px){
    .cf-full input,
    .cf-full label{
        float:right;
    }
}
</style>

<div class="cf-full">
    <input id="a" />
    <label class="helptext">Label</label>
</div>

更新：在评论之后，因为我不清楚标签从上到下（上/下）的变化，所以也许这会有所帮助。

与某些定位样式类似的东西：http://jsfiddle.net/SuWLr/1/

.cf-full {
    position:relative;
}
.cf-full input,
.cf-full label{
    display:block;
    position:absolute;
}
.cf-full input {left:0;top:20px;}
.cf-full label{left:0;top:0px;}

@media all and (max-width: 300px){
    .cf-full input {left:0;top:0px;}
    .cf-full label{left:0;top:20px;}
}

【讨论】：

类似的东西，但不是从右到左，我想从上到下更改。所以 float 在这里不太适用
@IanClark 清洁工？但标签不是从上到下，这是 OP 想要的
我的意思是说，除非你想翻转元素（比如在移动视图下），否则你的元素不必是position: absolute。此外，您不需要设置 left: 0 值。如果 OP 希望他们反过来，那么只需将其从 max-width 更改为 min-width
@IanClark 我同意，确定 OP 想要反向（输入上方的标签）已经在正常视图中.. left:0;有没有给 OP 一个想法，他可以轻松地改变它

【解决方案2】：

这行得通

div {
    display:table;
}
input {
    display:table-footer-group;
}
label {
    display:table-header-group;
}

http://jsfiddle.net/v8xTC/

【讨论】：

这是魔法！ GJ :)