"shared border"でserveral divを作成するには？

Question

私はdivをまとめて美しくグループ化してより創造的な形のアウトラインを作成する方法を見つけようとしています。基本的には、共有枠を持つテキストボックスを作成したかったのです。私はしかし、私はそれをacheive方法はただ非常に醜いと、拡張不能な感じ

.white-box{ 
 
width: 300px; 
 
} 
 
.white-box-tab{ 
 
position: relative; 
 
left: 8px; 
 
width: 45%; 
 
height: 25px; 
 
background: #fff; 
 
box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.1), -1px 0px 1px rgba(0, 0, 0, 0.1); 
 
border-radius: 3px 3px 0px 0px; 
 

 
text-align: center; 
 
} 
 
.white-box-tab:after{ 
 
    content:''; 
 
    width:100%; 
 
    height:1px; 
 
    position:absolute; 
 
    background:white; 
 
    bottom: -0.5px; 
 
    left: 0px; 
 
} 
 

 
.white-box-body{ 
 
width: 100%; 
 
height: 200px; 
 
background: #fff; 
 
box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1), -1px -1px 1px 0px rgba(0, 0, 0, 0.1); 
 
border-radius: 0px 3px 3px 3px; 
 
}

<div class="white-box"> 
 
<div class="white-box-tab"> 
 
The title 
 
</div> 
 
<div></div> 
 
<div class="white-box-body"> 
 
</div> 
 
</div>

THEREの上に醜いサンプルをmadedてきました。そのようなタスクを完了するためのより良い方法はありますか？

Answer 1

私は単に要素に下の枠線を適用し、他のdivの境界線の幅によってそれを下に移動しないでしょう。

.white-box { 
 
    width: 300px; 
 
} 
 

 
.white-box .box { 
 
    border: 1px solid #ddd; 
 
    background-color: white; 
 
} 
 

 
.white-box .box.white-box-tab { 
 
    border-bottom: none; 
 
    position: relative; 
 
    top: 1px; 
 
    margin-left: 5%; 
 
    width: 70%; 
 
    z-index: 10; 
 
} 
 

 
.white-box-body { 
 
    height: 300px; 
 
}

<div class="white-box"> 
 
    <div class="box white-box-tab"> 
 
    The title 
 
    </div> 
 
    <div></div> 
 
    <div class="box white-box-body"> 
 
    </div> 
 
</div>

鉱山よりも効率的に見える