在div內添加邊框

Question

我正在處理一個表單編輯器頁面，用戶可以在其中添加自定義元素。 有了這個，我正在處理一個可以在其中包含子列 div 的 div。 現在，用戶可以設置父 div 的邊框。 設置父 div 的邊框時，是否可以在每個子列 div 之間設置垂直邊框？

設置邊框時的當前行為：

當用戶設置邊框時我們想要什么：

我試過的：

• 添加box-shadow: 5px 0px 0px 0px black; 在除最后一個之外的列 div 上，但是當邊框設置為點/虛線時無法應用
• 設置outline: 1px solid 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 的左邊距和右邊距？ 這會造成黑色邊框的錯覺。