0

我有这个非常简单的代码 -在这里提琴。

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%（您可以轻松实现），而在缩小时间隔变得更小宽度，当您放大深度时，间隔消失并且两个框重叠。
有没有办法将两个盒子之间的空间设置为固定空间？

4

1 回答 1

2

我建议border-spacing: 10px;在设置为display: table;. 这是对使用表属性的元素进行间隔的最有效方法。

如果您需要比边框间距提供更多的间距控制，您可能需要考虑在布局中使用表格单元格以外的其他东西，希望这对您有用！

这是您的小提琴的更新，演示了边框间距的使用：

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

于 2013-10-05T21:59:52.247 回答