Question

好的，我知道标题没有多大意义，但请耐心等待。我只是不知道如何用语言解释我正在完成的事情......我在下面附上的Photoshop中嘲笑了一个布局，以便最好地解释我想要实现的目标。

基本上我有一个博客按照故事＃1 - 5的顺序吐出我的故事。我可以根据我希望故事的显示方式为博客故事分配一个独特的div class / id。在我的示例 .small 和 .large

中

现在，继承人。 Wordpress将按照＃1-5的顺序发布故事但是我想在左侧浮动列中显示所有.small故事，在另一列中显示所有.large故事。

我的第一直觉是尝试以编程方式改变wordpress推送故事以使其适合我的列的顺序，但这变得对服务器密集，然后我想到使用jQuery进行非常复杂的重新安排重新排序用户浏览器中的所有内容。第二种方式是进步，但它仍然有很多错误，所以我突然意识到这可能是CSS的强大功能。我整天都在搞乱它，但无法使用CSS。

希望其他人知道怎么把这个疯狂的东西拉下来？

要切入追逐，只需滚动到下面附带的图片：） enter image description here

Answer 1

按照你的图片，看起来你想要这个：

http://jsfiddle.net/JYdB9/4/

@media (min-width: 1px) {
    .wrapper {
        text-align: right;
    }
    .small {
        float: left;
        width: 50%;
        text-align: left;
    }
    .large {
        display: inline-block;
        width: 50%;
        text-align: left;
    }
    .small + .small {
        clear: left;
    }
}

有几个附带条件：

您需要一个包装器将inline-block元素对齐到右边;
你不能在<div>之间有任何空格（摆脱讨厌的空白问题）

Answer 2

这是一个CSS解决方案，在以下情况下有效：1）正方形在一个容器内，只允许两个显示在一行中; 2）.large块的数量可以超过{{1}的数量仅阻止1.这是一个小提琴：http://jsfiddle.net/uPzh6/2/。

请记住，通过使用边距可以在一行中创建两个块之间更大的间隔。在这里看到另一个小提琴：http://jsfiddle.net/VEEE6/1/。

该解决方案使用.small和.large的任意顺序。

HTML：

.small

CSS：

<div id = "wrapper">
    <div class="small">1</div>
    <div class="large">2</div>
    <div class="large">3</div>
    <div class="small">4</div>
    <div class="small">5</div>
    <div class="small">6</div>
    <div class="large">7</div>
    <div class="small">8</div>
    <div class="large">9</div>
</div>

Answer 3

我建议将两个包含div（列），一个用于.small，一个用于.large，然后用jquery .appendTo（）将.large移动到右列，将.small移动到左边。当然这不是一个css解决方案，但是在这种情况下，像left.small to left和.large to right这样简单的东西将不起作用。

这种解决方案无效：

<body style="width: 300px">
    <div style="float: left; clear: left; width: 100px; height: 100px; background: #ccc;">left</div>
    <div style="float: right; clear: right; width: 200px; height: 200px; background: #ccc;">right</div>
    <div style="float: left; clear: left; width: 100px; height: 100px; background: #ccc;">left</div>
    <div style="float: right; clear: right; width: 200px; height: 200px; background: #ccc;">right</div>
    <div style="float: right; clear: right; width: 200px; height: 200px; background: #ccc;">right</div>
    <div style="float: right; clear: right; width: 200px; height: 200px; background: #ccc;">right</div>
    <div style="float: right; clear: right; width: 200px; height: 200px; background: #ccc;">right</div>
    <div style="float: left; clear: left; width: 100px; height: 100px; background: #ccc;">left</div>
   <div style="float: left; clear: left; width: 100px; height: 100px; background: #ccc;">left</div>

基本上你需要两列。

CSS：是否可以创建两个左浮动但按顺序排列的列？

3 个答案: