Question

编辑： Kevin's answer解决了这个问题;但是，我不清楚为什么 float查询中的@media声明不起作用。任何想法将不胜感激 -

我有两个数据集，在语义上是一个按时间顺序排列的列表。在平板电脑和浏览器上，我想将这些列表显示为两个单独的列。在手机或小屏幕上，我想将两列折叠成一列，保留其按时间顺序排列。保留元素的时间顺序的解决方案是一个有序列表，我将其设置为两列的外观; 例如 here是展示解决方案的小提琴。

基本上，我有一个有序列表，其列表元素有两个类之一（.left或.right），这使得它们向左和向右浮动，我有一组{{ 1}} - 创建我想要的响应行为的查询。问题是，虽然我可以左右浮动它们，但我不知道如何创建我想要的垂直流程。 例如。在that fiddle中，我有一个列表，

@media

简单的样式，

<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>

但是，由此，右栏中的内容显示向下移动 - 如下所示： JSFiddle Screenshot

而不是我真正想要的，看起来像这样： What I wish the JSFiddle looked like

我知道我可以将它实现为两个单独的列/ <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>，这些列在较小的屏幕上由JavaScript重新排序，但我想知道是否有一种方法可以保留其语义方面订购时避免垂直流动问题？

谢谢！

Answer 1

your fiddle

问题是这些元素不是浮动元素。在特定媒体查询中为它们提供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 个答案: