1

我有一种情况，我有一个具有特定顺序的 div 列表，需要以相当复杂的方式呈现。简单来说，这是我的 HTML：

<div>
    <div class="box">1 (first in list)</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">8</div>
    <div class="box">9 (last in list)</div>
</div>

我想要显示divs 的方式是从左到右以 4 行为单位，每一行从下到上堆叠，如下所示：

9
5 6 7 8
1 2 3 4

我创建了一个显示我所追求的结果的小提琴：http: //jsfiddle.net/mpcjs/ - 但是，我想要一个不需要重新排序divHTML 中的 s 的解决方案。另请注意，divs 的数量是可变的。

这甚至可能吗？欢迎使用 CSS3/jQuery 解决方案！

4

5 回答 5

1

你应该看看flexbox。这是一个演示它如何工作的小提琴，但需要注意的是我只在 Chrome 中测试过它。

.flex{
width:400px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap-reverse;
-ms-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
-webkit-box-pack: start;
-moz-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;}
于 2013-03-20T15:52:15.950 回答
1

这可以使用 jQuery 插件jQuery Masonry来实现。

替换它（从第 287 行开始）

var position = {
  top: minimumY + this.offset.y
};

和

var position = (this.options.fromBottom) ? {
  bottom: minimumY + this.offset.y
} : {
  top: minimumY + this.offset.y
};

jsFiddle：http: //jsfiddle.net/fnexE/

于 2013-03-20T15:52:37.903 回答
1

这不是一个可行的解决方案，但是writing-mode你可以在 CSS3中使用 chrome 和 safari 。查看关于垂直文本的 w3-dev 部分。

.row { 
  writing-mode: bt-rl; 
}
.box { 
  display: inline-block;
  vertical-align: top;
}

http://jsfiddle.net/mpcjs/4/

于 2013-03-20T16:08:44.060 回答
0

我不确定如何从底部堆叠 DIV，但这会反转它们：

HTML：

<div>
    <div>
        <div class='box'>1</div>
        <div class='box'>2</div>
        <div class='box'>3</div>
        <div class='box'>4</div>
        <div class='box'>5</div>
        <div class='box'>6</div>
        <div class='box'>7</div>
        <div class='box'>8</div>
        <div class='box'>9</div>
    </div>
</div>

CSS：

.box{
    float:left;
    border:1px solid #000;
    width:22%;
    margin:1%;
}

查询：

$('div > .box').each(function() {
    $(this).prependTo(this.parentNode);
});
于 2013-03-20T15:52:57.717 回答
0

如果你想要一个纯 CSS 解决方案，它会这样：

基本的 HTML

<div class="container">HOVER ME!
<div class="inner">one</div>
<div class="inner">two</div>
<div class="inner">three</div>
<div class="inner">four</div>
<div class="inner">five</div>
<div class="inner">six</div>
<div class="inner">seven</div>
</div>

我们将内部浮动到右侧：

.inner {
    float: right;
    width: 100px;
    height: 100px;
    background-color: lightsalmon;
    margin: 5px;
    font-size: 20px;
}

就这样 ！好吧，不是全部，你仍然需要悬停

.container:hover,
.container:hover div {
    -webkit-transform: rotate(180deg);
    -webkit-transition: all 3s;
}

好吧，那只是为了让它有点有趣，但效果很好，不是吗？

测试一下

于 2013-03-21T06:53:48.143 回答