設定いくつかのdiv要素の周囲に境界線

Question

私はfollowing pageの製品概要ボックスを作成しようとしています：

私は次のdivに境界線を設定するために遊んでました：

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

結果がどのように見えます次

私はそれがそのように見てみましょうしたいと思います：

divを正しく設定するにはどうすればよいですか？または、ボックスに合わせてバックグラウンドイメージをデザインする方が良いでしょうか？

返信いただきありがとうございます。

Answer 1

セルの枠線が目に見えるDIVではなく、tableを使用できます。

また、DIVにはdisplay: table,display: table-rowおよびdisplay: table-cellを使用し、セル要素の境界を再度定義します。

Answer 2

コンテナに4つの罫線を置き、最後の辺を除いて各子にborder-bottomを追加します。

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

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

https://jsfiddle.net/cqjxuype/

Answer 3

これは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>

私は、背景フレームの画像をお勧めしませんそれをロードすることは帯域幅の無駄です。