Question

inline-block是有史以来最棒的CSS标签。（这意味着我昨晚才知道它是如何工作的。但后来我抛弃了几十行HTML而不是它。）它让块重新流动！

当屏幕太小时，我们如何编写折叠成不同顺序的横幅？

大屏幕

[ A ][ B ][ C ]

小屏幕？

[ C ]
[ B ]
[ A ]

Answer 1

您需要一些HTML和CSS技巧来进行订单切换，然后您可以简单地使用media queries，例如：

Demo Fiddle

HTML

<div>D</div>
<div>C</div>
<div>B</div>
<div>A</div>

CSS

div{
    display:inline-block;
    width:50px;
    box-sizing:border-box;
    height:50px;
    width:25%;
    border:1px solid black;
    float:right;
}
@media (max-width: 700px) {
    div {
        display:block;
        width:100%;

    }
}

通过使元素按相反顺序排列，然后在CSS中使用float:right，它会按照您预期的顺序放置它们 - 当它们在屏幕调整大小时被赋予100％宽度时会被忽略 - 因此它们出现在DOM（反向）订单。

Answer 2

首先提到＆＃39; flex＆＃39;的人。我仍然喜欢我之前的float:解决方案，SW4也可以使用 - 如果你能找到一种方法将div放在一起。但它的flex允许您重新排序。

此外，@media＆amp;类似系统（如50%），引用当前页面大小（可能是A4），而不是当前窗口大小。我希望能够如此敏捷以至于我们的行为就像移动应用程序一样，即使我们只是一个有人匆匆忙忙的通用浏览器。所以我们需要JS-- CSS的主要克星 - 来触发变化。

技巧是display: flex;启用order: N ;。这意味着将容器切换到display: inline-block;将打开文档顺序：

<script>
    function resizeMe(win) {
      var size = $(window).width();
      var display = size > 600 ?  'inline-flex' :  'inline-block';
      $('#flexMe').css({ display: display });
    }
    $(window).bind('resize', resizeMe);
    $(window).bind('load', resizeMe);
</script>

<div id="flexMe" style="display: flex; width: 100%;" >
    <div id="hdrLogo" class="hdrLogo hdrNv" style="order: 3; width: 375px;" >
        Logo goes here
    </div>

    <div id="hdrAuth" class="hdrNv" style="order: 2; width: 375px;">
        Login stuff goes here
    </div>

    <div id="hdrNavBar" class="hdrNv" style="order: 1; width: 375px;">
        Record navigator goes here
    </div>
</div>

记录导航器就是左上角或最接近记录，而徽标位于记录的右上角或最远处。

display：内联块，在低介质宽度下具有交替流

2 个答案:

Demo Fiddle