两个内联div需要浮动吗？

我有两个子div，内联50％，每个父div的内部。我在父项上使用:after，在其下面使用15px顶部和底部边距绘制一个hr。两个内联div需要浮动吗？

hr不会去父母的div下，除非我浮动一个子divs左或右。如果我将它们浮起来，hr呈现在父div中间的某处。

我已经将左侧子div左移了，它呈现正常，但提示我问：我是否需要将两个子div都浮起来，还是可以接受，或者更正确地浮动它们两个？

编辑：

注意小提琴是如何显示的hr几乎父.double DIV的顶部。

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

来源

2014-06-25 NaN

可以添加一个小提琴 – Mark

您可以在你的问题你当前的代码？另外，在[JSFiddle]（http://jsfiddle.net/）中提供它可以提供帮助。 – ajp15243

当然，马克。我会添加一个小提琴。 – NaN

我不跟随这是你试图完成什么？ 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; 
}

来源

2014-06-25 22:47:30

我敢肯定你能后

但是达到你所追求的，而无需使用::，使用该方法的解决方法是简单地添加明确：既使其包裹其他内容如下该类别。你可能也不需要高度：1px;

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

}

http://jsfiddle.net/HH5s7/

来源

2014-06-25 23:47:17

两个内联div需要浮动吗？

回答

相关问题