Question

我有一个特定高度和宽度的容器，容纳了许多孩子（div）。我想在每个div周围都有一个4px浅蓝色边框。两个相邻的div应该只有4px的空间。

我能够通过手动设置高度，宽度和边距/边框来实现这一目标，但我会按照父母的百分比调整孩子的大小。

这是我设置的小提琴，显示父母的div，但没有任何间距或边框。

＆＃13;

.container {
    height: 300px;
    width: 300px;
    background-color: lightblue;
}

.left {
    width: 30%;
    height: 100%;
    background-color: lightyellow;
    float: left;
}

.top-right {
    width: 70%;
    height: 50%;
    background-color: lightred;
    float: right;
}

.bottom-middle {
    width: 35%;
    height: 50%;
    background-color: lightpink;
    float: left;
}

.bottom-right {
    width: 35%;
    height: 50%;
    background-color: lightgreen;
    float: right;
}

.border {
    /* margin: 4px; */
}

＆＃13;

<div class="container">
    <div class="left border"></div>
    <div class="top-right border"></div>
    <div class="bottom-middle border"></div>
    <div class="bottom-right border"></div>
</div>

＆＃13;

http://jsfiddle.net/ymv0oave/

Answer 1

所有div的2px border和容器的2px border。

.container {
 ...
  border: 2px solid blue;
}
.container div{
  box-sizing: border-box;
  border: 2px solid blue;
}

https://jsfiddle.net/afelixj/mja5kfvw/

Answer 2

在这里填写完整的答案

.border {
/* margin: 10px; */
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
border:4px solid red;
padding: 4px;

}

.remove-right{
border-right: none;
}

然后将该类放入div类标记

<div class="container">
  <div class="left border remove-right"></div>
  <div class="top-right border remove-right "></div>
  <div class="bottom-middle border"></div>
  <div class="bottom-right border"></div>
</div>

Answer 3

您可以使用calc()函数css来使用％并且仍然具有精确的4px边框。

HTML：

<div class="container">
    <div class="left border-right"></div>
    <div class="top-right border-bottom"></div>
    <div class="bottom-middle border-right"></div>
    <div class="bottom-right"></div>
</div>

CSS：

.left {
    width: 30%              //Fallback for the 0.8% people still using IE7/IE8
    width: calc(30%-4px);   //HERE
    height: 100%;
    background-color: lightyellow;
    float: left;
}

.top-right {
    width: 70%;
    height: 70%                //Fallback for the 0.8% people still using IE7/IE8
    height: calc(50% -4px);    //HERE
    background-color: lightred;
    float: right;
}

.bottom-middle {
    width: 35%              //Fallback for the 0.8% people still using IE7/IE8
    width: calc(35% -4px);  //HERE
    height: 50%;
    background-color: lightpink;
    float: left;
}

.bottom-right {
    width: 35%;
    height: 50%;
    background-color: lightgreen;
    float: right;
}

.border-right {
    border-right: 4px solid lightblue;
}

.border-bottom {
    border-bottom: 4px solid lightblue;
}

容器内相邻元素之间的一致间距

3 个答案: