css - 水平元素的响应流困境

Question

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

这是它的剥皮版本:

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

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

Answer 1

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

示例:

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

首先改变元素的顺序:

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

然后你可以调整他们的 float ，并在响应时清除 float 。

.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;
}

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