2014-06-25 70 views
0

我有兩個子div,內聯50%,每個父div的內部。我在父項上使用:after,在其下面使用15px頂部和底部邊距繪製一個hr兩個內聯div需要浮動嗎?

hr不會去父母的div下,除非我浮動一個子divs左或右。如果我將它們浮起來,hr呈現在父div中間的某處。

我已經將左側子div左移了,它呈現正常,但提示我問:我是否需要將兩個子div都浮起來,還是可以接受,或者更正確地浮動它們兩個?

編輯:

注意小提琴是如何顯示的hr幾乎父.double DIV的頂部。

http://jsfiddle.net/SatdL/

.single, 
.double { 
float:left; 
width:100% 
} 

.single:after, 
.double:after { 
Content:""; 
margin:15px 0; 
background-color:#FFFFFF; 
border-bottom:1px solid #E2E2E2; 
box-sizing:content-box; 
display:block; 
height:1px; 
} 

.double .small-left { 
width:49%; 
float:left; 
display:inline-block; 
padding-right:15px; 
border-right:1px solid #E2E2E2; 
vertical-align:top; 
} 

.double .small-right { 
width:42%; 
float:right; 
border:none; 
display:inline-block; 
padding-left:15px; 
vertical-align:top; 
} 


<div class="double"> 
    <div class="small-left">Test</div> 
    <div class="small-right">Test</div> 
</div> 
+0

可以添加一個小提琴 – Mark

+0

您可以在你的問題你當前的代碼?另外,在[JSFiddle](http://jsfiddle.net/)中提供它可以提供幫助。 – ajp15243

+0

當然,馬克。我會添加一個小提琴。 – NaN

回答

0

我不跟隨這是你試圖完成什麼? Check This Out

.small-left, 
.small-right { 
    width:48%; 
    float:left; 
    padding:0 1%; 
    border-bottom:1px solid #ccc; 
} 

.small-left { 
    border-right: 1px solid #ccc; 
    margin-left:-1px; 
} 
0

我敢肯定你能後

但是達到你所追求的,而無需使用::,使用該方法的解決方法是簡單地添加明確:既使其包裹其他內容如下該類別。你可能也不需要高度:1px;

.single:after, 
.double:after { 
Content:""; 
clear:both; 
border-bottom:1px solid #E2E2E2; 
box-sizing:content-box; 
display:block; 

} 

http://jsfiddle.net/HH5s7/