css - 如何将带有边框的 div 并排放置在固定包含的内部

Question

将两个 div 的宽度设置为小于 50% 不会剪切，因为它们之间会产生一个小间隙。

https://jsfiddle.net/54u543e5/

<div id="container">
    <div id="a"></div>
    <div id="b"></div>
</div>

#container {
    width: 50%;
}

#b {
    width: 50%;
    height: 1.5rem;
    background-color: black;
    float: right;
    border-top: 0.2rem solid red;
    border-right: 0.2rem solid red;
}

#a {
    width: 50%;
    height: 1.5rem;
    background-color: grey;
    float: left;
    border-top: 0.2rem solid blue;
    border-left: 0.2rem solid blue;
}

Answer 1

问题是，默认情况下，width不包括边框。所以如果你使用 width: 50% , 总宽度将为 50% + 0.2rem , 大于 50% .

因此，您可以:

• 使用 width: calc(50% - 0.2rem) , 因此总宽度将为 50% - 0.2rem + 0.2rem , 即恰好 50%

  #container {
    width: 50%;
  }
  .item {
    width: calc(50% - 0.2rem);
    height: 1.5rem;
    background-color: black;
    float: right;
    border: solid red;
    border-width: 0.2rem 0.2rem 0 0;
  }
  .item + .item {
    background-color: grey;
    float: left;
    border-color: blue;
    border-width: 0.2rem 0 0 0.2rem;
  }

  <div id="container">
    <div class="item"></div>
    <div class="item"></div>
  </div>

• 使用 box-sizing: border-box .这将使 width包括边框。

  #container {
    width: 50%;
  }
  .item {
    box-sizing: border-box;
    width: 50%;
    height: 1.5rem;
    background-color: black;
    float: right;
    border: solid red;
    border-width: 0.2rem 0.2rem 0 0;
  }
  .item + .item {
    background-color: grey;
    float: left;
    border-color: blue;
    border-width: 0.2rem 0 0 0.2rem;
  }

  <div id="container">
    <div class="item"></div>
    <div class="item"></div>
  </div>