Question

截至目前，这个设置并排排列2个盒子，但是当容器变小时，盒子相互叠加，就像上次帮助我的人创建的这个jsfiddle看到的那样： http://jsfiddle.net/gW8r2/1/

我的问题是，如果它可以反转它堆叠的顺序，那么当容器变得太小时，右边的框（蓝色）堆叠在左框的顶部？

JSFiddle上显示的代码

CSS：

.parent {
width: 100%;
height: 100%;
border: 1px solid green;
text-align: center;
}

.parent > div {
display: inline-block;
}

.a {
width: 100px;
height: 100px;
background: red;
}

.b {
width: 200px;
height: 100px;
background: blue;
}

HTML

<div class="parent">
<div class="a"></div>
<div class="b"></div>
</div>

Answer 1

我建议您使用@media次查询，以便将rotate() transform函数应用于.parent及其子级：

@media screen and (max-width: 320px) {
    .parent {
        -webkit-transform:  rotate(180deg);
        transform:  rotate(180deg);
    }

    .parent > div {
        display: block;
        margin: 0 auto 5px;
        -webkit-transform: rotate(-180deg);
        transform: rotate(-180deg);
    }
}

<强> Example Here

值得注意的是， IE9 + 支持@media查询和CSS转换。

Answer 2

检查 demo jsFiddle

CSS

.parent {
    width: 100%;
    height: 100%;
    border: 1px solid green;
    text-align: center;
    text-align: left;
    float: left;
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
}

.parent > div {
    display: inline-block;
    position: relative;
    float: right;
    display: block;
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);

}

Answer 3

为什么不这样做呢？

@media screen and (max-width: 320px) {
   .parent{
      direction: rtl;
   }
}

#parent {
  width: 300px;
  height: 100px;
}

#div1,
#div2 {
  width: 49%;
  height: 100%;
  display: inline-block;
}

#div1 {
  background-color: red;
}

#div2 {
  background-color: blue;
}

@media all and (max-width: 320px) {
  #parent {
    direction: rtl;
  }
}

<div id="parent">
  <div id="div1"></div>
  <div id="div2"></div>
</div>

反转内联块的顺序？

3 个答案:

CSS