设置周围的几个div的

边框

我打得周围设置边框以下的div：

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

结果看起来像以下：

我想让它看起来像：

如何正确设置div的任何建议？或者，设计一个背景图像以适合盒子会更好吗？

我很感谢你的回复！

来源

2016-09-19 mrquad

您提供的链接无效。 –

如果你不使用图片，你必须刻意设置每个div的边框，以便整个单元的边框厚度是统一的 –

你将需要显示更多代码以获得有用的答案。你的容器div应该包含所有的子元素，你很可能需要“清除”它们。尝试创建一个jsfiddle来展示你的问题并分享它。 – James

您可以使用table而不是您可见的单元格边界的DIV。

或对于DIV使用display: table,display: table-row和display: table-cell，同样为单元元素定义边界。

来源

2016-09-19 13:20:45 Johannes

用于布局的表格通常是不被接受的。 – James

Thx为您的回复！我更新了链接！ – mrquad

将四个边框放在容器上，然后在每个小孩中添加border-bottom，除了最后一个。

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

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

https://jsfiddle.net/cqjxuype/

来源

2016-09-19 13:25:20

这是一个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>

我不会推荐一个背景帧图像，因为它是一个痛苦的工作与加载它是浪费带宽。

来源

2016-09-19 13:46:12

设置周围的几个div的

回答

相关问题