为什么在@media查询中无法正常运行？

Question

编辑： 凯文的答案解决了问题； 但是，我不清楚为什么 @media查询中的float声明不起作用。 任何想法都将不胜感激-

我有两个数据集，从语义上讲是一个，按时间顺序排列。 在平板电脑和浏览器上，我想将这些列表显示为两个单独的列。 在电话或较小的屏幕上，我想将两列折叠为一列，以保持它们的时间顺序 。 保留元素按时间顺序排列的解决方案是一个有序列表，我将其样式化以创建两列的外观。 例如， 这是一个小提琴，展示了该解决方案。

基本上，我有一个有序列表，其列表元素具有两个类之一（ .left或.right ），这两个类使它们向左右浮动，并且我有一组@media -queries可以创建我想要的响应行为。 问题是，尽管我可以左右浮动它们，但我不知道如何创建所需的垂直流。 例如在小提琴中，我有一个清单，

<body>
    <ol>
        <li class='left'>Left 1 <br> Left 1 continued </li>
        <li class='right'>Right 1</li>
        <li class='right'>Right 2</li>
        <li class='left'>Left 2</li>
    </ol>
</body>

样式简单，

<style>
    ol {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }

    @media (min-width: 50em) {
        body {
            width: 50em
        }
        li {
            width: 45%
        }
    }

    @media (max-width: 50em) {
        li {
            width: 100%;
        }

        .left {
            float: left;
        }

        .right {
            float: right;
        }
    }

    li {
        display: inline-block;
    }

    li.left {
        background-color: blue;
    }

    li.right {
        background-color: red;
    }
</style>

但是，这样一来，右栏中的内容就会向下移动-如下所示： JSFiddle屏幕截图

而不是我真正想要的，它看起来像这样： 我希望JSFiddle看起来像

我知道我可以将其实现为两个单独的column / div ，它们由JavaScript在较小的屏幕上重新排序，但是我想知道是否有一种方法可以保留其排序的语义方面，同时又避免了垂直流的问题这里？

谢谢！

Answer 1

你的小提琴

问题在于那些元素不是浮动元素。 在特定的媒体查询中为其赋予float属性根本无法按预期工作。 现在检查，它应该去。 只是扩大小提琴的窗户。

您的新CSS

@media (max-width: 50em) {
    li {
        width: 100%;
    }
}


li.left {
    float:left;
    background-color: blue;
}

li.right {
    float:right;
    background-color: red;
}

Answer 2

这是相当不同的尝试。 也许它符合您的需求。 http://jsfiddle.net/NicoO/vyMWS/2/

您的问题很令人困惑，您不应该在图像中添加左右短语，而是：开始故事1 +结束故事1等。

ol
{
    margin: 0;
    padding: 0;
    list-style-type: none;
    -webkit-column-count: 2;
    -moz-column-count: 2;
    -ms-column-count: 2;
    -o-column-count: 2;
    column-count: 2;

}

ol li
{
    background-color: blue;
     display: block;
}

ol li:nth-child(2n)
{
    background-color:red;
}

@media (max-width: 50em) {
    ol
    {
       -webkit-column-count: 1;
      -moz-column-count: 1;
      -ms-column-count: 1;
      -o-column-count: 1;
      column-count: 1;  
    }
}

为什么在@media查询中无法正常运行？

问题描述

2 个解决方案

解决方案1
3 已采纳 2014-03-03 19:54:07

解决方案2
0 2014-03-03 19:58:45

为什么在@media查询中无法正常运行？

问题描述

2 个解决方案

解决方案1 3 已采纳 2014-03-03 19:54:07

解决方案2 0 2014-03-03 19:58:45

解决方案1
3 已采纳 2014-03-03 19:54:07

解决方案2
0 2014-03-03 19:58:45