1

我正在使用我们的朋友 javascript 编写一个解决方案，但我想知道您的 CSS 专家是否有适合我的更优雅的解决方案。

我有四列这样

| A | B | C | D|

当他们开始变得有点局促，屏幕上大约 1130 像素宽时，我想将其更改为以下顺序：

| B | C | D |
|     A     |

压缩它们的下一阶段是：

| B | C |
| A | D |

然后进行更多移动布局：

| C |
| B |
| D |
| A |

我知道这有点疯狂，但这是有充分理由的。这些列主要用于不同的任务阶段。因此，在查看项目概述时，很高兴首先看到某些类别。

我个人使用一些 jQuery 移动 div 没有问题，但使用 CSS 编写代码会很好。

4

3 回答 3

2

Twitter Bootstrap 3 的网格系统非常强大，可能会得到你想要的。

使用他们的类会是这样的（我会使用他们的 mixin 来创建它，它使您的类更加语义化）。看到这个 JS Fiddle

<div class="content">
    <div class="row">
        <div id="c" class="col-xs-12 col-sm-6 col-sm-push-6 col-md-4 col-md-push-4 col-lg-3 col-lg-push-6">C</div>
        <div id="b" class="col-xs-12 col-sm-6 col-sm-pull-6 col-md-4 col-md-pull-4 col-lg-3 col-lg-pull-0">B</div>
        <div id="d" class="col-xs-12 col-sm-6 col-sm-push-6 col-md-4 col-md-push-0 col-lg-3 col-lg-push-3">D</div>
        <div id="a" class="col-xs-12 col-sm-6 col-sm-pull-6 col-md-12 col-md-pull-0 col-lg-3 col-lg-pull-9">A</div>
    </div>
</div>

更新：使用他们内置的 LESS Mixins 获得一些奖励积分......这可能会更好地分组，但我认为将每个项目作为一个单独的项目更容易阅读。

#a{
    .make-xs-column(12);
    .make-sm-column(6);
    .make-sm-column-pull(6);
    .make-md-column(12);
    .make-md-column-pull(0);
    .make-lg-column(3);
    .make-lg-column-pull(9);
}

#b{
    .make-xs-column(12);
    .make-sm-column(6);
    .make-sm-column-pull(6);
    .make-md-column(4);
    .make-md-column-pull(4);
    .make-lg-column(3);
    .make-lg-column-pull(0);
}

#c{
    .make-xs-column(12);
    .make-sm-column(6);
    .make-sm-column-push(6);
    .make-md-column(4);
    .make-md-column-push(4);
    .make-lg-column(3);
    .make-lg-column-push(6);
}

#d {
    .make-xs-column(12);
    .make-sm-column(6);
    .make-sm-column-push(6);
    .make-md-column(4);
    .make-md-column-push(0);
    .make-lg-column(3);
    .make-lg-column-push(3);
}

那么你的 HTML 就是：

<div id="c">C</div>
<div id="b">B</div>
<div id="d">D</div>
<div id="a">A</div>
于 2013-09-20T18:51:18.997 回答
2

在不知道列的高度的情况下，它可能会有点棘手，但您可以结合使用 css 媒体查询（例如@media screen and (max-width:1130px){...）和绝对定位来实现您正在寻找的效果。

这是一个JSFiddle 演示，可帮助您入门。只需调整浏览器的宽度即可触发断点（任意设置为 700、500 和 300 像素宽度）。

不过，您仍然可能需要 javascript（或 jQuery）top根据其他列的高度设置某些列的值。

于 2013-09-20T18:56:56.277 回答
1

一种非常简单的解决方案是复制内容，然后根据屏幕宽度隐藏或显示 div。因此，您的标记可能如下所示：

<div id="container-desktop">
    <div class="col">A</div>
    <div class="col">B</div>
    <div class="col">C</div>
    <div class="col">D</div>
</div>

<div id="container-tablet">
    <div class="col">B</div>
    <div class="col">C</div>
    <div class="col">D</div>
    <div class="col">A</div>
</div>

<div id="container-phone">
    <div class="col">C</div>
    <div class="col">B</div>
    <div class="col">D</div>
    <div class="col">A</div>
</div>

CSS：

.col {
    width:25%;
    float:left;
    display:inline;
}
#container-tablet,
#container-phone {
    display:none;
}

@media all and (max-width: 768px) {

    .col { width:50% }

    #container-desktop {
        display:none;
    }

}
@media all and (max-width: 480px) {

    .col { width:100% }

    #container-tablet {
        display:none;
    }

}
于 2013-09-20T19:23:59.030 回答