Question

我有这个非常简单的代码 - fiddle here。

CSS：

.subcontent > div {
    display: table-cell;
}
.orangebox {
    width: 55%;
    background-color: red;
    padding-top: 6px;
}
.bluebox {
    width: 43%;
    background-color: blue;
    padding-top: 60px;
}
.spacer{
    width: 1%;   
}

嗯，在代码中你可以看到两种类型的盒子，一种带有“orangebox”样式，另一种带有样式“bluebox”的同一行旁边的盒子，两者都有“display：table-cell”样式”。
在这两个盒子之间有“垫片”，它们之间留有宽度为1％的空间唯一的问题是当您在网页中放大/缩小（CTRL +或 - ）时，缩小时的间隔开始大于1％（您可以轻松实现），并且在缩小时间隔小于宽度和深度放大时间隔消失，两个框重叠有没有解决方案将两个盒子之间的空间设置为固定空间？

Answer 1

我建议在设置为border-spacing: 10px;的父元素上设置display: table;（或您想要的任何金额）。这是使用表属性的空间元素的最有效方法。

如果您需要更多地控制间距而不是边框间距，则可能需要考虑使用除table-cell之外的其他内容来布局，所以希望这对您有用！

这是对你的小提琴的更新，展示了边框间距的使用：

http://jsfiddle.net/vBngZ/7/

同一行中两个div之间的空格

1 个答案: