jQuery的：與列組號碼添加一行，並設置寬度

Question

這可能會聽起來微不足道給你，但仍..

用戶輸入一個名稱和兩個數字，都存儲在變量中。這是重複多次。

我想在19列的行中顯示這些數據，其中11列是大小1，另一列是大小8，從第一個插入的數字開始（當然在第二個數字結束。在這個截圖：

大部分庫由標準的12列，每列「有限的」，這是我不能用（我通常引導工作），因爲該數據實際上是有意義的，只有當不需要擔心超小屏幕，因爲這隻會在電腦上使用。

也許flexbox？

開放的建議，當然:)

在此先感謝了！

Answer 1

只需創建兩個類;一個是頁面寬度的1/19 th，另一個是頁面寬度的9/19。然後漂浮兩種元素向左：

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

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

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

然後在jQuery的，如果你想添加一個新行，只要確保給它新的類：

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

請記住，如果要附加偏移量的數據，則需要添加空<div>元素e one類。

希望這會有所幫助！ :)

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>