CSS3中的平衡交替列布局

我正在尝试创建一个平衡的（2-）列布局

内容不是文本，而是块，高度不同。 只要“左”和“右”的高度（大致）相同，内容就应该左右交替放置

即，在该图像中： 1和3之间的空间不应该存在

或者在此图像中： 2应单独位于右侧，1、3和4应位于左侧（它们之间没有空间）

我试着像这样使用“floating

's”：

HTML:

（见和）

我还尝试使用列的（

列计数：2；列填充：auto；

），但这不会先从左到右填充列。（它首先从上到下填充。）

---

如果没有JavaScript，这可能吗？

如果没有JS，这是不可能的。这是我根据本·霍兰德的一篇文章制作的小提琴。至少在我看来，你是在追求什么

HTML:

JS:

var colCount=0；
var colWidth=0；
var保证金=20；
var块=[]；
$（函数（）{
$（窗口）。调整大小（设置块）；
});
函数setupBlocks（）{
colWidth=$（'.block'）.outerWidth（）；
colCount=2
对于（var i=0；i我不确定我是否得到了正确答案

“2应该独立于右侧，1、3和4应该独立于右侧
应站在左侧（中间无空隙）。”

html:

<div id="box">
    <div class="data">1</div>
    <div class="data" style="float:right">2<br/>2<br/>2<br/>2</div>
    <div class="data">3<br/>3</div>
    <div class="data">4</div>
</div>

#box {
    width:100%;
    height:auto;
    float:left;
}
.data {
    height:auto;
    width:50%;
    float:left;
    background-color:#ccc;
    border-bottom:solid 1px #000;
}

Fid：

这是纯css。所有内容都是左浮动的
，然后使用
（4）2的

我不知道在没有javascript的情况下如何设置内联css。可能是服务器端吗？但我怀疑你能否得到元素的高度

无论如何，我希望这能有所帮助。
更新：我认为仅用CSS几乎不可能实现这一点。有许多不同的解决方案，但它们都需要一些折衷，除非您愿意使用JavaScript或某些服务器端代码

使用CSS列
这里是使用重新排序的块。这里是一个使用CSS列而不重新排序的示例

您可以使用将块流更改为垂直，除非您更改其输出顺序。如果您可以先输出奇数，然后输出偶数，则获胜

<div class="wrapper">
  <div class="block1">1</div>
  <div class="block3">3</div>
  <div class="block2">2</div>
  <div class="block6">4</div>
</div>

.wrapper {
    column-count: 2;
    column-width: 100px;
    -moz-column-width: 100px;
    -webkit-column-width: 100px;
    width: 260px;
}
div {
    border: 1px solid #999;
    display: inline-block;
    margin: 10px;
    width: 100px;
}
.block1 { height: 100px; }
.block2 { height: 130px; }
.block3 { height: 150px; }
.block4 { height: 100px; }

一个很大的缺点是动态内容；我们很少知道区块高度。因此，除非您愿意计算区块高度，否则此解决方案的应用非常有限

如果你愿意使用JS
使用一个插件，比如砖石。在或中

其他选择
这就给您留下了需要一些折衷的以下选项

将块分组为列。请参阅。这将改变块的流向，先是垂直，然后是水平

在块上使用
display:inline块；vertical align:top；
。这将在块下面留下一些空白

强制调整块的高度，使其不存在问题。对于包含其他内容的块，请使用
溢出
属性以允许块内滚动

正如其他人所评论的，您可以尝试计算服务器上块的高度

纯CSS解决方案：

将以下内容添加到css文件：

ol.context li:nth-child(even) {
float: right;
}

不要更改html或其他任何内容

导致FF：


--

工作原理
我们没有将所有元素“左”浮动并创建间隙，而是根据元素所在的侧/列浮动每个容器。
您可以尝试混合使用flex和float（仅在Firefox/IE10和safari 5.1.7中测试，因为我个人认为CSS不是您的解决方案）


但是，在您选择的任何CSS案例中，最好是使用mansonry脚本。
CSS并不是真的适合这种布局。现在你有很多CSS的布局和基本方法：显示和浮动

您可以轻松地在html树结构中同时使用这些方法，但这些方法并不意味着要混合使用。一个框将是浮动的，一个内联级别框或块级别框，并且假设每个框都在流中交互。
浮动，在非浮动元素之后在其前面断开一行，或向下滑动，直到它有足够的空间，以便通过CSS r向右/向左调度

内联块离开浮动元素并断开一行如果没有足够的空间，内联块之间的浮动元素将在浮动之前继续断开一行

列CSS将用内容逐个填充列。请参阅：

内联flex元素似乎与浮动元素一起工作……但它是否应该一直持续到它成为一个经过验证的规则

在我看来，明智的做法是使用javascript实现预期的布局，并在float或display上进行中继：inline block+width作为回退

最后一个解决方案是在服务器端提前考虑这一点，如果可能的话，将您的项目发送到两个容器中，并使用另一个适当的标记（不知道您的
ol li
中发送的真实内容）

FLEX测试的CSS：

li.gruppe
{
  background: #048;
  color: white;
  font: bold 32px Arial, sans-serif;
  text-align: center;
  box-sizing:border-box;
  border-bottom:1px solid white;
   border-bottom:1px solid white;
    display: -webkit-inline-flex;
  display: -moz-inline-flex;
  display: -ms-inline-flex;
  display: inline-flex;  
  width:50%;
 }
li:nth-child(even){
  float:right;
  clear:right;
  border-left:1px solid white;
  margin-top:0;
}

编辑：这是一个有趣的解决方案，但不幸的是，它没有解决所要求的问题

我在这里提出的解决方案将后续元素放在交替的列中，因此：1->left，2->right，3->left，4->right，等等

这本身就是一个有趣的问题，但不是人们要求的

感谢评论中的@Nils指出这一点

原始答案
以下是我对flex的尝试！


我不确定它在IE11中是否有效

代码

。开始{
背景：绿色；
颜色：白色；
字体大小：粗体；
文本对齐：居中；
光标：指针；
}
.结束{
背景：红色；
颜色：白色；
字体大小：粗体；
文本对齐：居中；
光标：指针；
}
.集装箱外部{
溢出：隐藏；
}
.集装箱{
显示器：flex；
柔性包装：包装；
弯曲方向：立柱；
最大高度：19999px；
利润上限：-10000px
<div id="box">
    <div class="data">1</div>
    <div class="data" style="float:right">2<br/>2<br/>2<br/>2</div>
    <div class="data">3<br/>3</div>
    <div class="data">4</div>
</div>

#box {
    width:100%;
    height:auto;
    float:left;
}
.data {
    height:auto;
    width:50%;
    float:left;
    background-color:#ccc;
    border-bottom:solid 1px #000;
}

<div class="wrapper">
  <div class="block1">1</div>
  <div class="block3">3</div>
  <div class="block2">2</div>
  <div class="block6">4</div>
</div>

.wrapper {
    column-count: 2;
    column-width: 100px;
    -moz-column-width: 100px;
    -webkit-column-width: 100px;
    width: 260px;
}
div {
    border: 1px solid #999;
    display: inline-block;
    margin: 10px;
    width: 100px;
}
.block1 { height: 100px; }
.block2 { height: 130px; }
.block3 { height: 150px; }
.block4 { height: 100px; }

block1 {
  height: 100px;
  position: absolute;
  left: 0; 
  top: 0;
}

block2 {
  height: 110px;
  position: absolute;
  left: 0; 
  top: 100px; /* The height of the div above it */
}

ol.context li:nth-child(even) {
float: right;
}

li.gruppe
{
  background: #048;
  color: white;
  font: bold 32px Arial, sans-serif;
  text-align: center;
  box-sizing:border-box;
  border-bottom:1px solid white;
   border-bottom:1px solid white;
    display: -webkit-inline-flex;
  display: -moz-inline-flex;
  display: -ms-inline-flex;
  display: inline-flex;  
  width:50%;
 }
li:nth-child(even){
  float:right;
  clear:right;
  border-left:1px solid white;
  margin-top:0;
}