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

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

Answer 2

您可以使用 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相同。

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

2 个答案: