响应式设计css dom元素操作 [英] Responsive design css dom element manipulation
本文介绍了响应式设计css dom元素操作的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个包含输入元素和标签元素的 div 字段.两者都是 display: block
<输入id="a" ><label class="helptext"</label>
所以在正常视图中,输入字段将排在第一位.但是,我希望布局具有响应性,以便在移动设备中首先显示标签.
我知道这种 DOM 操作可以通过 javascript 轻松实现.但是有没有办法通过纯css实现反向DOM元素顺序?
解决方案
这个可行
div {显示:表;}输入 {显示:表页脚组;}标签 {显示:表头组;}
I have div field including a input element and a label element. Both are display: block
<div class="cf-full">
<input id="a" >
<label class="helptext"</label>
</div>
So in normal view, the input field will come first. However, i want the layout to be responsive, so that in mobile the label will come first.
I know this DOM manipulation can be achieved by javascript easily. But is there a way to achieve the reverse DOM elements order by pure css?
解决方案
This works
div {
display:table;
}
input {
display:table-footer-group;
}
label {
display:table-header-group;
}
这篇关于响应式设计css dom元素操作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文