Jquery：添加具有设置列数的行并设置宽度

Question

这对你来说可能听起来微不足道但仍然......

用户输入一个名称和两个数字，全部存储在变量中。这会重复多次。

我希望将这些数据显示在19列的行中，其中11列的大小为1，另一列的大小为8，从第一个插入的数字开始（当然在第二个列的末尾结束。这个截图：

大多数库都被标准的每列12列（我通常使用Bootstrap）“限制”，我无法使用它，因为数据实际上只有在同一行时才有意义。无需担心超小屏幕，因为这只会在计算机上使用。

也许是flexbox？

当然可以接受建议：）

提前致谢！

Answer 1

简单地创建两个类;一个是页面宽度的1/19，一个是页面宽度9/19的页面宽度。然后将两个元素浮动到左侧：

＆＃13;

＆＃13;

.one {
  float: left;
  width: calc(100% / 19);
}

.eight{
  float: left;
  width: calc((100% / 19) * 8);
}

＆＃13;

<div class="one">1</div>
<div class="one">1</div>
<div class="eight">8</div>
<div class="one">1</div>
<div class="one">1</div>
<div class="one">1</div>
<div class="one">1</div>
<div class="one">1</div>
<div class="one">1</div>
<div class="one">1</div>
<div class="one">1</div>
<div class="one">1</div>

＆＃13;

＆＃13;

＆＃13;

然后在jQuery中，如果你想添加一个新行，只需确保给它新的类：

$("body").append("<div class='eight'>New Data</div>");

请注意，如果您要附加偏移量的数据，则需要添加具有{的空 <div>元素{1}}上课。

希望这有帮助！ ：）

Answer 2

将Flexbox与calc()和flex-basis一起使用，您可以将一个类应用于您想要长的元素。

* {box-sizing:border-box;}

.row {
  display: flex;
}
.row > div {
  height: 10px;
  flex-basis: calc(100% / 19);
  border: 1px solid #999;
}
.row > div:nth-child(odd) {
  background: #ddd;
}
.row > .long {
  flex-basis: calc(100% / 19 * 8);
}

<div class="row">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="row row1">
  <div class="long"></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="row row1">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div class="long"></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>