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

2019年8月3日 144次阅读

看看这个页面：

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 class="featurebox">
  <div class="media">Image, slider, or other visual interest items here</div>
  <div class="items">Text of items of interest</div>
</div>
<div class="featurebox">
  <div class="media">A different image, slider, etc</div>
  <div class="items">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,那就更容易了.

点赞