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

如果你从不希望左项目在正确的项目下，这当然是完美的。现在这就是我现在遇到的情况，我正在寻找一种非脏或太多的代码方法。

我还创造了一个小提琴：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;
}

很多更好的方法是通过使用flexbox来实现所有这一切，虽然对它的支持还不是100％ - 请参阅这篇文章，了解它的工作原理：http://css-tricks.com/snippets/css/a-guide-to-flexbox/ - 如果你正在开发一个内部系统，那么flexbox将是一个更好的方法，你可以保证浏览器的用户将在哪里查看。

水平项目的响应流动困境

1 个答案:

实施例