在多個div周圍設置邊框

Question

我正在嘗試為以下頁面制作產品摘要框：

我在玩耍以在以下div上設置邊框：

<div style="border:1px solid black;" class="inner">
    <div style="padding-bottom: 14px;border:1px solid black;" class="title">

結果如下所示：

我想讓它看起來像這樣：

有什么建議如何正確設置div？ 或者設計一個適合盒子的背景圖像會更好嗎？

感謝您的答復！

Answer 1

您可以使用table代替顯示單元格邊框的DIV。

或使用display: table ， display: table-row和display: table-cell作為DIV，再次為cell元素定義邊框。

Answer 2

這是一個5分鍾的CSS解決方案：

 * { box-sizing: border-box; font-family: sans-serif; } .product { border: 2px solid #999; border-radius: 2px; width: 20em; } .product--header, .product--image, .product--rating { width: 100%; border-bottom: 2px solid #999; } .product--header h2, .product--header h3 { text-align: center; padding: 0.25em 0 0.5em; margin: 0; } .product--image img { width: 100%; padding: 0.25em; z-index: 1; } .product--image { position: relative; } .product--pricetag { position: absolute; z-index: 2; left: 0; top: 1em; color: white; background: rgba(0, 0, 0, 0.75); text-align: center; width: 40%; padding: 0.5em; } .product--rating p { text-align: center; } .product--links { width: 100%; margin: 0.5em; } .product--links a.btn { display: block; color: white; background: blue; text-align: center; width: 90%; margin-left: 2.5%; padding: 0.5em; margin-bottom: 0.25em; } 

 <div class="product"> <div class="product--header"> <h2>Test Product</h2> <h3>Price Class: $$ | P3 | 14</h3> </div> <div class="product--image"> <img src="http://placekitten.com/200/200" alt="cat"> <p class="product--pricetag"> 999 $ </p> </div> <div class="product--rating"> <p>Rating: 4/5</p> </div> <p class="product--links"> <a class="btn">Buy on Amazon</a> <a class="btn">Other Sizes</a> </p> </div> 

我不推薦使用背景框架圖像，因為使用和加載它很痛苦，浪費帶寬。

Answer 3

在容器上放置四個邊框，然后在每個孩子中添加邊框底部，最后一個孩子除外。

.container-bordered {
  border: 2px solid red;
}

.container-bordered > div:not(:last-of-type) {
  border-bottom: 2px solid red;
}

https://jsfiddle.net/cqjxuype/