水平项目的响应流困境

Question

对于我的网站，我已经多次使用一个 css class，直到现在它一直都很好。

这是它的精简版：

.list {
    font-size: 0;
    font-family: Lucida Grande;
}

.list__item {
    display: inline-block;
    width: 50%;
    font-size: 12px;
    min-height: 100px;
    border: 1px solid black;
    box-sizing: border-box;
}

@media (max-width: 500px) {
    .list__item {
        width: 100%;
        display: block;
    }
}

如果您不希望左侧项目位于右侧项目之下，这当然可以完美运行。现在这就是我现在遇到的情况，我正在寻找一种不脏或太多代码的方法来执行此操作。

我还创建了一个 fiddle 来玩：http://jsfiddle.net/sjbe00nk/1/。

所以想要的行为是我希望左边的块在右边的块下面。

Answer 1

您可以在响应式屏幕上使用浮动来更改布局，但这主要是通过更改项目的顺序，然后使用 CSS 调整水平定位来完成的。

示例：

http://jsfiddle.net/sjbe00nk/2/

首先更改项目的顺序：

<div class="list">
    <div class="list__item right">
        right
    </div>
    <div class="list__item left">
        left
    </div>
</div>

然后就可以调整他们的浮动，响应时清除浮动。

.list__item {
    display: block;
    width: 50%;
    font-size: 12px;
    min-height: 100px;
    border: 1px solid black;
    box-sizing: border-box;
}

.left{
    float:left;
}
.right{
    float:right;
}

一个 much 做所有这些的更好方法是使用 flexbox，尽管对它的支持还不是 100%——请参阅这篇关于它如何工作的文章：http://css-tricks.com/snippets/css/a-guide-to-flexbox/ – 如果您正在开发一个内部系统，那么 flexbox 将是一种更好的方法，例如，您可以在其中保证人们将在什么浏览器上查看。

水平项目的响应流困境

Responsive flow dilemma with horizontal items

css

media-queries

示例：