のdivのグリッドは、これは私の失敗した試みであり、その子のサイズ

Question

DIV親テーブルで右浮かべてください：

https://jsfiddle.net/j75hxxa2/1/

私は右側のブロックと、余分な灰色をしたいです一部は消えてしまった。親に

float: right; 

を追加

は、その子どもたちが非常に小さく、小さなことができます。追加することで子どもを広げようとすると

width: 50%; 

彼らはラインを壊します。

簡単な修正はありますか？

は（また、私が思う

margin-top: 1px; 

が動作していない？）

感謝を事前

Answer 1

良い方法は、テーブルを使用することです：

HTML：

<table> 
    <tr><td>Text</td><td>Text</td><td>Text</td><td>Text</td></tr> 
    <tr><td>I</td><td>II</td><td>III</td><td>IIII</td></tr> 
</table> 

CSS：

table { 
    border-collapse: collapse; 
    background: #000; 
    border-top: 1px solid #777; 
    border-left: 1px solid #777; 
} 

table tr td { 
    border-right: 1px solid #777; 
    border-bottom: 1px solid #777; 
    color: #fff; 
} 

Answer 2

にフロートを追加し、以下のよう.cellする左、私は戻ってそれを変更、背景色を変更しました以前に割り当てられた、またはあなたが望むように。

.cell { 
    width: 24.8%; 
    float:left; 
} 
#table { 
margin-right: 1px; 
margin-top: 1px; 
background-color: #f22; 
width:100%; 
height:37px; 
}