jquery - 无法将 div 表中的单元格保持在 50%

Question

我希望有两列，如果我在一列中按下一个条目，它将被发送到另一列。但是，我无法让每个单元格保持在 50%。我该如何解决？

HTML:

<div class="divsholder">
  <div id="col-1" class="column"><div id="col-1-0">l</div><div id="col-1-1">e</div><div id="col-1-2">f</div></div>
  <div id="col-2"><div id="col-2-0">r</div><div id="col-2-1">i</div><div id="col-2-2">g</div><div id="col-2-3">h</div><div id="col-2-4">t</div></div>
</div>

CSS:

#divsholder {
  border: 1px solid blue;
}

.column {
  float: left;
  width: 50%;
}

div {
  border: 1px dashed red;
  margin: 5px;
}

fiddle :

http://jsfiddle.net/barra/121v4ow8/24/

这就是我想要的:

L   R
E   I
F   G
    H
    T

但我得到这个:

L   R
E   I
F   G
   H
T

Answer 1

我会尝试一些简单的方法来模拟 Grid 构建其样板的方式，只要您始终希望保持这种 50%(两列)布局。

HTML - 将列类添加到两个 div，以便它们可以以相同的方式运行

<div class="divsholder">
  <div id="col-1" class="column"></div>
  <div id="col-2" class="column"></div>
</div>

CSS - 调整装订线的宽度和边距

.column {
  float: left;
  width: 47%;
  margin: 1% 1% 1% 1%;
}

参见 fiddle .有时很容易做到!