html - 我希望我的 div 的边界完全重叠，但是当我将它们与 flex 对齐时会变得奇怪

Question

这里是一个大初学者，但我试图将我的 div 按行对齐，这样边框设计就不会在它们接触的地方变得过厚。

由于某些原因，我不能使用 pre 来编写 html，所以我将以纯文本形式编写。

.site {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;
  align-items: stretch;
}

.box1 {
  background: #000000;
  background: #000000;
  background: #000000;
  margin: 0px;
  padding: 0px;
  width: 55px;
  height: 100%;
  border: 3px solid black;
  background-color: white;
}

.box2 {
  background: #000000;
  background: #000000;
  background: #000000;
  margin: -3px;
  padding: 0px;
  width: 730px;
  height: 100%;
  border: 3px solid black;
  background-color: white;
}

<div class="site">

  <div class="box1">Box 1</div>

  <div class="box2">Box 2</div>

</div>

我还没有做到这一点，但我也希望整个 .site 周围有一个 3 px 的黑色边框。我基本上想要一个带有 3 px 黑色边框的 .site，不同组件之间有 3 px 分隔线。

Answer 1

我已经为你准备了一个小代码。您可以从两个片段中选择任何一个。

案例 1:您的 .site 类的 3px 边框，以及整洁干净的 div 以区分 .site 类和其中的两个 div。

.site, .box1, .box2{
display: flex;
padding:7px;
border:3px solid black;
}

<div class="site">

  <div class="box1">Box 1</div>

  <div class="box2">Box 2</div>

</div>

案例 2:边框略有变化，但根据您的需要，您的 .site 类的 3px 边框在这种情况下也将保持不变。

.site{
display:flex;
border:3px solid black;
padding: 5px;
}

.box1, .box2{
border: 3px solid black;
}

<div class="site">

  <div class="box1">Box 1</div>

  <div class="box2">Box 2</div>

</div>

希望这对您有所帮助。