用其子級大小的父表div浮動一個div網格

Question

這是我失敗的嘗試：

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

我希望右側的塊和多余的灰色部分消失。

添加

float: right;

父母使孩子變得很小又很小。 如果我嘗試通過增加孩子來擴大

width: 50%;

他們打破界限。

有簡單的解決方法嗎？

（我也認為

margin-top: 1px;

不工作嗎？）

提前致謝

Answer 1

如下所示，向.cell左添加浮點數，我更改了背景色，將其更改回您先前分配的或您希望的顏色。

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

Answer 2

更好的方法是使用表：

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