在多个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/