html – 根据css媒体查询重新调整DIV的显示顺序？

概述看看这个页面： http://new.brixwork.com/realtors/real-estate-website-features 在大型计算机屏幕下方,图像和文本块在楼梯设计中交替..在一个div上,图像在右侧,在另一个div上,在左侧.有4个街区. 我正在使用Skeleton框架(www.getskeleton.com)进行响应式网格设计,因此网格会在视口查询上重新调整大小,这很棒.然 看看这个页面：
http://new.brixwork.com/realtors/real-estate-website-features

在大型计算机屏幕下方,图像和文本块在楼梯设计中交替..在一个div上,图像在右侧,在另一个div上,在左侧.有4个街区.

我正在使用Skeleton框架(www.getskeleton.com)进行响应式网格设计,因此网格会在视口查询上重新调整大小,这很棒.然而,当图像和图像显示时,这会在iPad上的iphone或垂直视图上造成问题.文本框随机播放以相互搭配.

代替

图像文字
文字图片
图像文字
文字图片

我明白了

图片
文本
文本
图片
图片
文本
文本
图片

由于在我的HTML中输入对象的顺序.

所以问题是,是否有一种通过CSS重新定位项目的聪明方法？我已经使用过这样的媒体查询：

@media only screen and (max-wIDth: 959px) {}/* tablet Portrait size to standard 960 (devices and browsers) */@media only screen and (min-wIDth: 768px) and (max-wIDth: 959px) {}/* All Mobile Sizes (devices and browser) */@media only screen and (max-wIDth: 767px) {}/* Mobile Landscape Size to tablet Portrait (devices and browsers) */@media only screen and (min-wIDth: 480px) and (max-wIDth: 767px) {}/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */@media only screen and (max-wIDth: 479px) {}

有任何想法吗？我想这样做,而不是诉诸jquery来检测窗口大小,并重新调整大小,如果我可以避免它.我无法使用PHP来改变“回声”上的div命令,因为如果将平板电脑从水平位置移到垂直位置,我希望有效地重新进行重新洗牌.

解决方法 只要有强大的意志,必有一条路为你开！使用使用“六列Alpha”和“十列omega”等语义的框架的一大缺点是它们创建了对视觉排序的期望.六列位于左侧,十列位于右侧,Alpha / omega命名约定影响边距,因为顺序在标记中正确.我正在思考,你偶然发现了作者意想不到的用例.

(顺便提一下,你的十个列区域还包含溢出其容器的图像;即它们没有被调整大小)

直货：

我对未来可维护性的诚实建议是从骨架中学习,从中获取你想要的东西,了解它的不同类所做的事情……并重新发明它.

例如,主页上的内容是一系列功能容器.标记应该看起来一致,如下所示：

<div >  <div >Image,slIDer,or other visual interest items here</div>  <div >Text of items of interest</div></div><div >  <div >A different image,etc</div>  <div >More text of items of interest</div></div>

然后你可以设置这些样式以创建左右效果.这里的关键是选择器.通过向左浮动而不是向左移动到每个其他功能框内的div,我们的效果很容易实现：

.featureBox { wIDth: 600px; overflow: hIDden; clear: both;}.featureBox div { float: left; }.featureBox:nth-of-type(odd) div { float: right; }.items { wIDth: 200px }.media {background-color: grey; wIDth:400px; height: 100px;}

小提琴：http://jsfiddle.net/7qRfh/

修改你目前所拥有的问题是,这并不符合骨架对浮动从左到右堆叠的期望.如果您愿意说“phooey”,您可以识别您的容器,每隔一秒定位一次,然后翻转.columns浮动方向.您还需要覆盖omega和Alpha类行为,以便omega实际上像Alpha一样,反之亦然.在我看来,一团糟,但它会奏效.

黑客

我只是在这里小提琴,我想我关闭了它.在我的历史记录中找不到该URL,因此我可能没有先保存它. ： – /

但是不要紧.归结为：你可以用你当前的标记做你需要做的事情,但CSS的变化更加广泛而且变得坚果.

容器已经有位置：绝对,所以你必须卸下“六”和“十”列,绝对定位,顶部为“十”,底部为“六”.最大的问题是容易做到,容器以及“六”和“十”都需要设置高度.绝对定位从文档流中获取一个元素,因此没有高度它只会成为一个重叠的怪异混乱.

老实说,如果你按照它的方式坚持骨架,并且按照它的方式标记,那么最合理的黑客实际上就是JavaScript.如果您的页面上已经有jquery,那就更容易了.

总结

以上是内存溢出为你收集整理的html – 根据css媒体查询重新调整DIV的显示顺序？全部内容，希望文章能够帮你解决html – 根据css媒体查询重新调整DIV的显示顺序？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。