不能将单元格保持在50%的div表中

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

小提琴：

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

所以这就是我想要的

L   R
E   I
F   G
    H
    T

但我明白了：

L   R
E   I
F   G
   H
T

Answer 1

您可以使用Flexbox来完成它。

​

let a = ["l", "e", "f"];
let b = ["r", "i", "g", "h", "t"];

let f = (data, id, func) => {

  data.forEach((n, i) => $('#' + id).append(    
    $('<div/>', {
      'text': n,
      'id': id + '-' + i
    }).on({
      'click': () => func(i)
    })
  ))
}

f(a, "col-1", (i) => {});

f(b, "col-2", (i) => {});

* {margin:0;padding:0;box-sizing:border-box}
html, body {width:100%}

.divsholder {
  display: flex;
  border: 1px solid blue;
}

.divsholder > div {
  flex: 1;
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

​

将父.divsholder设置为display: flex，并使所有子级与flex: 1的宽度相同。

Answer 2

我会尝试一些简单的方法来模仿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。有时候很容易做到！