4

查看此页面： http: //new.brixwork.com/realtors/real-estate-website-features

在大电脑屏幕下方，图像和文本块以楼梯设计交替出现。在一个 div 上，图像在右侧，另一个在左侧。并且有4个街区。

我正在使用 Skeleton 框架 (www.getskeleton.com) 进行响应式网格设计，因此网格会根据视口查询重新调整大小，这很棒。但是，当图像和文本框随机排列以相互重叠时，这会在 iphone 或 iPad 上的垂直视图上造成问题。

代替

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

我明白了

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

因为在我的 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 来更改“echo”上的 DIV 顺序，因为如果平板电脑从水平位置变为垂直位置，我希望有效地进行重新洗牌。

4

1 回答 1

2

只要有强大的意志，必有一条路为你开！使用使用“六列 alpha”和“十列 omega”等语义的框架的最大缺点是它们创建了对视觉排序的期望。六列在左边，十列在右边，alpha/omega 命名约定会影响边距，因为顺序在标记中是正确的。我在想，您偶然发现了作者的一个意想不到的用例。

（顺便说一句，您的ten column区域还包含溢出其容器的图像；即，它们没有被调整大小）

直货：

我对未来可维护性的诚实建议是从骨架中学习，从中获取你想要的东西，了解它的不同类做什么......然后重新发明它。

例如，您在主页上拥有的是一系列功能容器。标记应该看起来一致，如下所示：

<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 的更改更加广泛并且变得疯狂。

容器已经有 position: absolute，所以你必须取消浮动“六”和“十”列，绝对定位它们，“十”在顶部，“六”在底部。最大的问题是它很容易做到，容器以及“六”和“十”都需要在它们上面设置高度。绝对定位将元素从文档流中取出，因此没有高度它只会变成重叠的怪异混乱。

老实说，如果你坚持使用骨架的方式和标记方式，那么最合理的 hack 实际上是 JavaScript。如果您的页面上已经有 jQuery，那就更容易了。

于 2012-03-17T02:15:09.703 回答