两个内联div需要浮动吗？

Question

我有两个子div，每个div在父div中内嵌50％。我在父级上使用:after在其下方绘制hr，其上下边距为15px。

hr不会在父div之下，除非我向左或向右浮动一个

子div。如果我将它们都浮动，hr会渲染到父div中间的某个位置。

我已经离开了左边的孩子div并且它很好，但是提示我问：不要我需要漂浮两个孩子的div，或者是否可以接受，或者更正确的漂浮两个孩子div它们？

修改

注意小提琴如何在父hr div的顶部显示.double。

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>

2 个答案:

答案 0 :(得分：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;
}

答案 1 :(得分：0)

我确定你可以在不使用:: after

之后实现你的目标

但是，使用该方法的修复只是添加clear：两者都使它包装在该类的其他内容之下。你可能也不需要高度：1px;

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

}

http://jsfiddle.net/HH5s7/

Answer 1

我不跟随这是你想要完成的事情吗？ 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;
}

Answer 2

我确定你可以在不使用:: after

之后实现你的目标

但是，使用该方法的修复只是添加clear：两者都使它包装在该类的其他内容之下。你可能也不需要高度：1px;

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

}

http://jsfiddle.net/HH5s7/