使用网格布局获得相等的 15px 边框答案

【问题标题】：Getting an equal 15px border with a grid layout使用网格布局获得相等的 15px 边框
【发布时间】：2017-04-25 02:48:01
【问题描述】：

我正在尝试使用 15px 彩色边框做出响应式网格布局，它可以正常工作，但是当有多个网格时，它会将边框加倍，即它加入的位置为 30px。

https://jsfiddle.net/exm8xsgx/

html,
body {
  height: 100%;
  width: 100%;
}

.container {
  height: 100%;
  width: 100%;
}

.one {
  height: 50vh;
  width: 25%;
  border-style: solid;
  border-color: red;
  border-width: 15px;
  float: left;
}

<div class="container">
  <div class="row">
    <div class="one">one</div>
    <div class="one">two</div>
    <div class="one">three</div>
    <div class="one">four</div>
  </div>
</div>

这是我尝试过的另一种方法。当限制浏览器宽度时，网格开始堆叠，边框再次翻倍，无论是相邻还是堆叠，都应始终为 15px。

https://jsfiddle.net/7bxtt82r/24/

html,
body {
  height: 100%;
  width: 100%;
}

.container {
  height: 100%;
  width: 100%;
}

.one:first-child {
  height: 50vh;
  width: 20%;
  border-style: solid;
  border-color: red;
  border-left-width: 15px;
  border-top-width: 15px;
  border-bottom-width: 15px;
  border-right-width: 15px;
  float: left;
}

.one:not(:first-child) {
  height: 50vh;
  width: 20%;
  border-style: solid;
  border-color: red;
  border-left-width: 15px;
  border-top-width: 15px;
  border-bottom-width: 15px;
  border-right-width: 15px;
  float: left;
  margin-left: -15px;
}

<div class="container">
  <div class="row">
    <div class="one">one</div>
    <div class="one">two</div>
    <div class="one">three</div>
    <div class="one">four</div>
  </div>
</div>

我也不知道会有多少个网格，所以它们会继续堆叠。

【问题讨论】：

为什么不使用媒体查询？
试试box-sizing:border-box;
@Vivick 如何将 box-sizing:border-box;阻止它翻倍？

标签： html css

【解决方案1】：

可以使用 CSS 表格，并将border-spacing 设置为15px，例如：

body {
  margin: 0;
}

.row {
  display: table;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 15px;
  width: 100%;
  background: red;
}

.one {
  display: table-cell;
  background: white;
}

<div class="row">
  <div class="one">one</div>
  <div class="one">two</div>
  <div class="one">three</div>
  <div class="one">four</div>
</div>

编辑

如果您需要为不同的视口宽度包装项目，可以使用 flexbox + box-shadow + 媒体查询。

body {
  margin: 0;
}

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 15px;
}

.one {
  flex-basis: 25%;
  box-shadow: 0 0 0 15px red;
  background: white;
}

@media (max-width: 992px) {
  .one {
    flex-basis: 50%;
    margin-bottom: 15px;
  }
}

@media (max-width: 768px) {
  .one {
    flex-basis: 100%;
  }
}

<div class="row">
  <div class="one">one</div>
  <div class="one">two</div>
  <div class="one">three</div>
  <div class="one">four</div>
</div>

【讨论】：

【解决方案2】：

您的外部边框可以保持在 15 像素，但如果您想要一个干净的外观并具有相同的边框，则与另一个边框接触的边框必须除以 2。

我为那些不相互接触的人使用了 10 像素和 20 像素的默认边框。（你可以做相反的事情：默认 20px 和 10px 对于那些触摸）

我在构建我的西蒙游戏时处理了这个问题here

 .squareCircled {
      height: 250px;
      width: 250px;
      border: 10px solid gray;
}   
 .green {
      background-color:#01B600; /*green*/
      border-top-left-radius: 100%;
      border-top:20px solid gray;
      border-left:20px solid gray;
      cursor: pointer;
    }

【讨论】：