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

【问题标题】：Can't keep cells in a div table at 50%不能将 div 表中的单元格保持在 50%
【发布时间】：2023-04-04 08:15:01
【问题描述】：

我希望有两列，如果我按下一列中的条目，它将被发送到另一列。但是，我不能让每个单元格都保持在 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

【问题讨论】：

标签： jquery html css ecmascript-6

【解决方案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的宽度相同。

【讨论】：

【解决方案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。有时很容易做到！

【讨论】：