Question

我想知道是否有一种纯粹的CSS方式来堆叠3个（或更多）div乱序，当它们小到足以将一个堆叠在另一个上面时。

我的意思是，我按此顺序有3个div

|             |
|[1]  [2]  [3]|
|             |

我想把它们堆叠起来，所以它们是：

|   |
|[3]|
|[1]|
|[2]|
|   |

CSS中有没有办法进行这种堆叠？或者我必须使用javascript吗？

Answer 1

我喜欢使用表格组来帮助我处理与文档流程相反的困难排序。

Fiddle

示例

<ul> <li class="one">One</li> <li class="two">Two</li> <li class="three">Three</li> </ul>

<强> CSS

ul { display: table; width: 100%; } ul li { width: 33%; text-align: center; box-sizing:border-box; } .two { display: table-footer-group; /* Will be displayed at the bottom */ background-color: green; } .one { display: table-row-group; /* Will be displayed in the middle */ background-color: yellow; } .three { display: table-header-group; /* Will be displayed at the top */ background-color: lightblue; } @media (min-width: 600px) { ul li { float: left; } }

Answer 2

虽然不漂亮，但处理此问题的典型方法是使用负边距。如果您在小屏幕和大屏幕上查看下面的代码段，您将看到所需的顺序。我使用负边距和正边距来移动列。

＆＃13;

@media (min-width: 600px) {
  .column {
    float: left;
    width: 33.33%;
  }
  
  .column-right {
    margin-left: 66.66%;
  }
  
  .column-left {
    margin-left: -100%;
  }
  
  .column-middle {
    margin-left: -66.66%
  }
}

＆＃13;

<div class="column column-right">3</div>
<div class="column column-left">1</div>
<div class="column column-middle">2</div>

＆＃13;

大多数响应式网格系统都内置了类似的东西。例如，Bootstrap在使用left和right属性的推拉类中遵循类似的方法。

Answer 3

您可以将＃3（内容顺序中的第一个）向右浮动，并将＃1和＃2浮动到左侧。移除浮动屏幕以获得更小的屏幕尺寸。

Answer 4

您可以尝试这种基本技术。还尝试熟悉响应式网页设计。

＆＃13;

div{ 
    border:1px solid black;
    text-align:center;
}
#container{ 
    width:100%;
    position:relative;
    float:left;
    padding:10px;
}
#container .item{
      width:16%;
     float:left;
     padding:50px;
     position:relative;
}
/* CSS3 - change divs width on window resize  */
@media screen and (max-width: 468px){
  #container .item{ 
                  width:100%; 
               }
}

＆＃13;

<div id="container">
        <div class="item">
           One
        </div>
        <div class="item">
           Two
        </div>
        <div class="item">
           Three
        </div>
</div>

＆＃13;

响应式设计，堆叠div不按顺序

4 个答案:

Fiddle