Javascript CSS：是否有可能创建两列左浮动但按顺序排列？_Javascript_Html_Css

Javascript CSS：是否有可能创建两列左浮动但按顺序排列？

javascript html css

Javascript CSS：是否有可能创建两列左浮动但按顺序排列？,javascript,html,css,Javascript,Html,Css,好吧，我知道这个标题没有什么意义，但请耐心听我说。我只是不知道如何用语言来解释我的成就。。。我在photoshop中模拟了一个布局，我在下面附上了这个布局，以最好地解释我试图实现的目标基本上我有一个博客，按照故事1-5的顺序把我的故事排出来。我可以为博客故事分配一个唯一的div类/id，具体取决于我希望该故事的显示方式。在我的例子中，.small和.large 现在，这是最难的部分。Wordpress将按#1-5的顺序发布故事，但我想在左浮动列中显示所有的.small故事，在另一列中显示所有的

好吧，我知道这个标题没有什么意义，但请耐心听我说。我只是不知道如何用语言来解释我的成就。。。我在photoshop中模拟了一个布局，我在下面附上了这个布局，以最好地解释我试图实现的目标

基本上我有一个博客，按照故事1-5的顺序把我的故事排出来。我可以为博客故事分配一个唯一的div类/id，具体取决于我希望该故事的显示方式。在我的例子中，.small和.large

现在，这是最难的部分。Wordpress将按#1-5的顺序发布故事，但我想在左浮动列中显示所有的.small故事，在另一列中显示所有的.mage故事

我的第一反应是尝试通过编程方式让wordpress改变发布故事的顺序，使其适合我的专栏，但这会导致服务器密集型，然后我考虑使用jQuery对用户浏览器中的所有内容进行非常复杂的重新排列。第二种方法正在进行中，但它仍然有很多bug，所以我意识到这可能是CSS的强大功能所带来的。我整天都在摆弄它，但是不能让它与CSS一起工作

希望其他人知道怎么把这件事搞得这么疯狂

要切入主题，只需滚动到下面我的附加图片：）

查看您的图像，看起来您需要以下内容：

这里有几个但书：

您需要一个包装器来将

内联块

元素向右对齐

在

之间不能有任何空格（摆脱讨厌的空格问题）

我建议创建两个包含div的列，一个用于.small，一个用于.large，然后使用jquery.appendTo（）将.large移到右侧列，将.small移到左侧。当然，这不是一个css解决方案，而是一些简单的东西，比如浮动。从左到小，从右到大，在这种情况下不起作用

这种解决方案将不起作用：

<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解决方案，如果：1）正方形在一个容器中，一行只能显示两个，2）

的数量。大的块可以超过的数量。小的块只能超过1。这是一把小提琴：
请记住，通过使用边距，可以在一行中的两个块之间创建更大的间隔。在这里看到不同的小提琴：
该解决方案可以使用任意顺序的.large
和.small

HTML:
只需给它们一个宽度，使两个div都能放在一行中（或用一个百分比表示宽度值）。是的，响应网格基本上就是这样工作的。@设计练习我可能读错了你的意思，但我试图分配一个浮点：左到。小到。大，变。小到33%宽，大到66%。它对div1和div2非常有效，但是div3和div4彼此水平堆叠。但我显然看错了方向…伙计们，我不太确定这很容易做到。当有两列时，4和5的顺序不同……当div为100%时，您的第一张图片显示什么？怎么样？现在你只需要两列网格就可以显示任意大小的屏幕了？这是你想要的吗？第二季和第五季都不在榜首。这是一个非常不可思议的想法！很快就要开始工作了。我上面的图片只是一个随机的例子，事实上在一个真实的博客上，顺序总是不同的。所以当我测试你的小提琴时，我确实遇到了一些情况，在这些情况下它不太起作用，我认为这与第n个孩子是2n有关。这对我来说都是新的CSS，所以我现在正在查找它，看看如何解决这个问题。嗨@Mark-hmm，如果你将它更改为它，它将正确清除，但是DRD提到的差距仍然存在。。。“还在想那个。”塞特克。。太神了现在距离如此之近，我的设计差距非常明显，因为div非常大，但是距离如此之近，我确信有办法解决这个问题。请记住，解决方案必须是可推广的，因为.small
和.large的顺序可能会有所不同。感谢Treavis，我的直觉告诉我，我必须像你建议的那样使用jQuery来完成这项工作。。我自己开发的解决方案仍然充斥着bug，所以我希望有一个更优雅的CSS解决方案。我希望我们都错了，这不需要一些丑陋的JS黑客来实际移动div：）这在小提琴中工作得非常好！！在我的实现中，我根本无法让它工作，现在就开始工作，看看会有什么中断
<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>

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

* {
    margin: 0;
    padding: 0;
}
#wrapper {
    width: 210px;
    text-align: right;
}

#wrapper > div {
    width: 100px;
    height: 100px;
    background-color: rgba(100, 100, 100, 1);
    border: 1px solid rgba(30, 30, 30, 1);
    text-align: center;
    margin-bottom: 5px;
}

#wrapper > div.small {
    float: left;
    clear: left;
    line-height: 100px;
    color: yellow;
}

#wrapper > div.small:before {
    content: "small: ";
}

#wrapper > div.large {
    display: inline-block;
    color: #fff;
    line-height: 100px;
}

#wrapper > div.large:before {
    content: "LARGE: ";
}