邊界空間屬性不起作用

Question

首先，感謝您爲此付出了時間。我想這樣的結果 - 因爲你下面的圖片上看到的一樣：

我試圖執行3個資料覈實。第一個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; 
} 

爲的DIV其餘的代碼是：

.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> 

我不能單獨頂格邊框和這裏就是我得到。我錯過了什麼？

完整的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是兩個leftcol和rightcol元素應用類

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

您detacont類的第一條規則是

border-top: 1px solid #c0c0c0; 

所以當你將這個類應用到列元素時，它帶來了它所有的CSS規則。

解決這個問題的方法之一是給容器一個獨特的類，它自己的border-top規則。

例：

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