我正在處理一個表單編輯器頁面，用戶可以在其中添加自定義元素。有了這個，我正在處理一個可以在其中包含子列 div 的 div。現在，用戶可以設定父 div 的邊框。設定父 div 的邊框時，是否可以在每個子列 div 之間設定垂直邊框？
設定邊框時的當前行為：
當用戶設定邊框時我們想要什么：
我試過的：
- 添加
box-shadow: 5px 0px 0px 0px black;除最后一個之外的列 div，但當邊框設定為點/虛線時無法應用 outline: 1px solid black為每個列 div設定，但由于列 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;
}
非常感謝任何幫助或建議！
uj5u.com熱心網友回復：
為了實作自己的目標，你只需要移動border，padding-top并padding-bottom從風格.main到.column。為了保持列高相同，無論內容如何，??您都可以display: flex在容器height: 100%上使用，然后在每個.column.
另請注意，您可以使用速記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>uj5u.com熱心網友回復：
您能否將主 DIV 的背景顏色設定為純黑色，然后為具有白色背景的內部 DIV 設定 1px 的左邊距和右邊距？這會造成黑色邊框的錯覺。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/324900.html
上一篇：如何去除懸停時的邊框