ボーダースペーシングのプロパティが機能しない

Question

まずは、この時間をとってくれてありがとう。私は3つのdiv要素を実装しようとした

：あなたは下の画像を見るのと同じ - 私はこの結果を取得したいです。コンテナのような最初のdivと、他の2つのDIVのような列。

私が作成したメインのDIVのコードは次のとおりです。div要素の残りのための

.detacont { 
border-top: 1px solid #c0c0c0; 
display: -webkit-box; 
display: -webkit-flex; 
display: -ms-flexbox; 
-webkit-box-orient: horizontal; 
-webkit-box-direction: normal; 
-webkit-flex-flow: row wrap; 
-ms-flex-flow: row wrap; 
margin-top: 20px; 
padding-top: 7px; 
} 

コードは以下のとおりです。ここで

.leftcol { 
display: -webkit-box; 
display: -webkit-flex; 
display: -ms-flexbox; 
display: flex; 
-webkit-box-orient: vertical; 
-webkit-box-direction: normal; 
width: 50%; 
} 

そして

.rightcol { 

border-left: solid 1px #c0c0c0; 
padding-left: 15px; 

} 

はHTMLです。

<div class="detacont"> 
<div class="detacont leftcol"> 
<div class="travel-price" itemprop="priceRange"> 
<span class="pricefrom"> 
Offer 
</span> 
<span class="pricelarge"> 
<span class="pricecurrency" itemprop="currenciesAccepted" content="USD">$</span> 
<span class="pricenums">150</span> 
<span class="pricenumsclose">per item</span> 
</span> 
</div> 

そして

<div class="detacont rightcol"> 
<div class="linkcls"> 
<a class="linkcliss" href="http://amazon.com" rel="nofollow" target="_blank">Buy Now</a> 
</div> 
</div> 
</div> 
</div> 

私はTOP divのボーダーを分離し、ここで私は取得しています何することはできません。私が見逃したことは？

完全なCSSコード：

<style> 

.detacont { 
border-top: 1px solid #c0c0c0; 
display: -webkit-box; 
display: -webkit-flex; 
display: -ms-flexbox; 
-webkit-box-orient: horizontal; 
-webkit-box-direction: normal; 
-webkit-flex-flow: row wrap; 
-ms-flex-flow: row wrap; 
margin-top: 20px; 
padding-top: 7px; 
} 
.detacont .leftcol { 
display: -webkit-box; 
display: -webkit-flex; 
display: -ms-flexbox; 
display: flex; 
-webkit-box-orient: vertical; 
-webkit-box-direction: normal; 
width: 50%; 
padding-top: 7px; 
} 
.travel-price { 
font-size: 2rem; 
line-height: 2.2rem; 
display: -webkit-box; 
display: -webkit-flex; 
display: -ms-flexbox; 
display: flex; 
-webkit-box-orient: horizontal; 
-webkit-box-direction: normal; 
-webkit-flex-flow: row wrap; 
-ms-flex-flow: row wrap; 
flex-flow: row wrap; 
} 
.pricefrom { 
font-size: 1.7rem; 
line-height: 2rem; 
-webkit-align-content: flex-end; 
-ms-flex-line-pack: end; 
align-content: flex-end; 
width: 100%; 
} 
.pricelarge { 
display: -webkit-box; 
display: -webkit-flex; 
display: -ms-flexbox; 
display: flex; 
-webkit-box-orient: horizontal; 
-webkit-box-direction: normal; 
-webkit-flex-direction: row; 
-ms-flex-direction: row; 
flex-direction: row; 
} 
.pricecurrency { 
font-size: 2rem; 
line-height: 3.3rem; 
-webkit-align-self: flex-start; 
-ms-flex-item-align: start; 
align-self: flex-start; 
} 
.pricenums { 
font-size: 4.1rem; 
line-height: 4.1rem; 
} 
.pricenumsclose { 
color: #888; 
-webkit-align-self: flex-end; 
-ms-flex-item-align: end; 
align-self: flex-end; 
padding-bottom: .75rem; 
} 
.rightcol { 

border-left: solid 1px #c0c0c0; 
padding-left: 15px; 

} 

.linkcls { 
    font-size: 1.4rem; 
    line-height: 1.8rem; 
} 
.linkcliss { 
    font-size: 1.7rem; 
    line-height: 2.5rem; 
    -webkit-box-align: center; 
    -webkit-align-items: center; 
    -ms-flex-align: center; 
    align-items: center; 
    background-color: #008385; 
    color: #fff; 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-pack: center; 
    -webkit-justify-content: center; 
    -ms-flex-pack: center; 
    justify-content: center; 
    min-height: 48px; 
    padding: 8px 24px; 
    text-align: center; 
    -webkit-transition: color 200ms,background-color 200ms,border-color 200ms; 
    transition: color 200ms,background-color 200ms,border-color 200ms; 
    width: 100%; 
} 
</style> 

Answer 1

detacontごdetacontクラスの最初のルールは

で両方 leftcolと rightcol要素

<div class="detacont leftcol"> 
... 
<div class="detacont rightcol"> 

に適用されるクラスです

border-top: 1px solid #c0c0c0; 

このクラスを列要素に適用すると、すべてのCSS規則が適用されます。

これを解決する方法の1つは、独自のborder-topルールのコンテナをコンテナに与えることです。

例：

.container { 
    border-top: 1px solid #c0c0c0; }