divテーブルのセルを50％に保つことができません

Question

私は2つの列を持ちたいと思います。ある列の項目を押すと、他の列に送られます。しかし、私は各セルを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; 
} 

フィドル：

L R 
E I 
F G 
    H 
    T 

0：

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

だからこれは私が後だものです

が、私はこれを取得しています：

L R 
E I 
F G 
    H 
T 

Answer 1

あなたはフレキシボックスでそれを行うことができます。

display: flexに親 .divsholderを設定し

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>

を、すべて作ります同じ幅の子どもはflex: 1です。

Answer 2

私は、この50％（2列）のレイアウトを常に維持したい限り、Gridが定型文を作成する方法を簡単にエミュレートすることを試みます。

HTML - 彼らは

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

CSS同じように振る舞うことができるように、両方のdiv要素に列クラスを追加 - ガッター

.column { 
    float: left; 
    width: 47%; 
    margin: 1% 1% 1% 1%; 
} 

のためにあなたの幅と余白を調整しfiddleを参照してください。時には簡単です！