在 div 中添加边框

Question

我正在开发一个表单编辑器页面，用户可以在其中添加自定义元素。有了这个，我正在开发一个可以在其中包含子列 div 的 div。现在，用户可以设置父 div 的边框。设置父div的边框时，每个子列div之间是否可以有垂直边框？

设置边框时的当前行为：

当用户设置边框时我们想要什么：

我尝试过的：

• 在除最后一个以外的列 div 上添加 box-shadow: 5px 0px 0px 0px black;，但当边框设置为点线/虚线时无法应用
• 为每个列 div 设置 outline: 1px solid black，但由于列 div 填充，轮廓将超出父 div
• 尝试了@Rory 的解决方案，使其更接近目标，但是当将内容添加到单个列时，它会破坏使其看起来像具有内部和外部边框的单个 div 的显示

需要考虑：

• 列 div 的数量可以是 1 到 6 个
• 内部 div 可以具有动态内容，这意味着其他内部 div 的高度可以高于其他内部 div，但列 div 应该具有相同的高度
• 如果需要，我可以使用 jQuery

HTML 文件

<div class="main">
    <div class="content">
        <div class="column">
            <div class="inner"></div>
        </div>
        <div class="column">
            <div class="inner"></div>
        </div>
        <div class="column">
            <div class="inner"></div>
        </div>
    </div>
</div>

CSS

.main {
  padding-top: 10px;
  padding-bottom: 10px;
  margin: 0;
  width: 100%;
  border: 1px solid black;
}

.main:after {
  clear: both;
  display: table;
  content: " ";
}

.content {
  margin-left: -15px;
  margin-right: -15px;
}

.column {
  float: left;
  padding-right: 15px;
  padding-left: 15px;
  width: 33.33%;
  min-height: 1px;
  box-sizing: border-box;
  background-color: red;
  background-clip: content-box;
}

.inner {
  min-height: 50px;
}

非常感谢任何帮助或建议！

Answer 1

要实现您的目标，您只需将border、padding-top 和padding-bottom 样式从.main 移动到.column。无论内容如何，​​要保持列高相同，您可以在容器上使用display: flex，然后在每个.column 上使用height: 100%。

另请注意，您可以使用简写 margin 和 padding 规则一次设置所有 4 个维度。

.main {
  margin: 0;
  width: 100%;
}

.content {
  margin: 0 -15px;
  display: flex;
}

.column {
  float: left;
  padding: 10px 15px;
  width: 33.33%;
  min-height: 1px;
  box-sizing: border-box;
  background-color: red;
  background-clip: content-box;
  border: 1px solid black;
}

.inner {
  min-height: 50px;
}

<div class="main">
  <div class="content">
    <div class="column">
      Lorem ipsum dolor sit amet consectetur adipiscing elit. Lorem ipsum dolor sit amet consectetur adipiscing elit. Lorem ipsum dolor sit amet consectetur adipiscing elit. Lorem ipsum dolor sit amet consectetur adipiscing elit. 
      <div class="inner"></div>
    </div>
    <div class="column">
      <div class="inner"></div>
    </div>
    <div class="column">
      <div class="inner"></div>
    </div>
  </div>
</div>

Answer 2

您能否将主 DIV 的背景颜色设置为纯黑色，然后为具有白色背景的内部 DIV 设置 1px 的左侧边距和右侧边距？这会产生黑色边框的错觉。