Html CSS使用divs创建等距表格

我正在尝试创建一个盒子集合，每个盒子的宽度为50%，边距可以折叠以创建均匀的间距，但也可以放置在彼此旁边

比如：

身体{
保证金：0；
}
.陈列柜{
背景色：#000；
溢出：自动；
}
.陈列柜>部门{
宽度：50%；
利润率：20px；
颜色：#fff；
边框：1px实心#fff；
}
框1
框2

有没有办法只使用父div和子div来实现这一点？还是必须创建孙子div？

类似这样的内容：

你应该使用

display:inline-block
width:calc(50% - 44px);

关于儿童司

---

如果在flex项目上设置

margin

，然后在flex容器上设置相同数量的

padding

，则使用

Flexbox

可以获得类似的效果。这将在每个弹性项与父项和弹性项之间创建相同的间距

正文{
保证金：0；
}
.陈列柜{
背景色：#000；
显示器：flex；
填充：10px；
}
.陈列柜>部门{
弹性：1；
利润率：10px；
颜色：#fff；
边框：1px实心#fff；
}

框1
框2

对齐块时要记住的几件事

组合宽度（包括边距）不能大于100%组合宽度（作为一般规则，存在例外情况）。不要忘记，没有框大小：边框框，边框和填充也在此宽度内计数

当您希望两个元素彼此相邻时，需要使用display:block和float:left或display:inline block告诉它们

看这把小提琴：

---

可以使用flexbox网格来均匀分割长方体

只需将这两条规则添加到CSS中：

---

使用

display:table

并添加

table layout:fixed

->所有单元格的宽度都相同

.table{
宽度：100%；
显示：表格；
表布局：固定；
背景色：黑色；
颜色：白色；
边界间距：10px；
}
特罗先生{
显示：表格行
}
特塞尔先生{
显示：表格单元格；
边框：1px纯白；
}

第1单元
第2单元
第三单元
包含更多文本的单元格4
你想用一条线吗？用填充物填充空间。中间的空隙大于外部空隙。需要更多的css来解决这个问题。是的，这两个css之间有额外的空间。另外，假设我想要一个由4个方框组成的网格，两个在顶部，两个在底部，我如何使用flex来实现这一点？@Lewis很好的观点，为了解决这个问题，只给子div留一个边距，而给子div留一个边距。showCases>div:last child留一个所需的边距。这是唯一的答案，两个div之间没有两倍的边距！你赢了@Lewis！：请说我有4个盒子，每个盒子50%。上面两个，下面两个。在这种情况下，我如何使用flex？使用
display:table
和
table layout:fixed
不是最佳解决方案吗？我看不到任何间距。我没有设置解决方案的样式。更新了我的帖子。它也是在jsfiddle:Nice solution，+1上创建的。问题是每次添加更多单元格时都需要创建一行。或者假设您有一个媒体查询，如果调整屏幕大小，您希望有3个或更多单元格。如果它们卡在行内，这很难，但是如果它们基于百分比，并且没有限制性的行元素，则很容易。但是+1，因为我学到了一些东西
.showCases>div {
  display: inline-block;
  width: calc( 50% - 44px);
  margin: 20px;
  color: #fff;
  border: 1px solid #fff;
}

display:inline-block
width:calc(50% - 44px);

body{
 margin:0;
}
.showCases{
 background-color:#000;
 overflow:auto;
}
.showCases>div{
 width:46%;
 margin:20px;
 margin-right: 2.5%;
 margin-left: 2.5%;
 color:#fff;
 border:1px solid #fff;
 display: block;
 float: left;
}
.showCases>div:last-of-type{
  margin-right: 0;
  margin-left: 0;
}

.showCases{
    display: flex;
}

.showCases>div{
    flex: 1;
}