我正在尝试为following page创建一个产品摘要框:
我正在玩耍以设置以下div的边框:
<div style="border:1px solid black;" class="inner">
<div style="padding-bottom: 14px;border:1px solid black;" class="title">
结果如下所示:
我想让它看起来像那样:
有关如何正确设置div的任何建议吗?或者设计一个适合盒子的背景图像会更好吗?
感谢您的回复!
答案 0 :(得分:1)
您可以使用table
代替您可以看到其单元格边框的DIV。
或者对DIV使用display: table
,display: table-row
和display: table-cell
,再次为单元格元素定义边框。
答案 1 :(得分:1)
这是一个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;
}
&#13;
<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>
&#13;
我不推荐使用背景帧图像,因为使用它并加载它会带来痛苦。
答案 2 :(得分:0)
在容器上放置四个边框,然后在每个子项中添加border-bottom,最后一个除外。
.container-bordered {
border: 2px solid red;
}
.container-bordered > div:not(:last-of-type) {
border-bottom: 2px solid red;
}