创建一个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;
}