在包装元素内定位两个元素

Question

我在尝试将两个div并排放置在包装器div中时遇到一些问题，一个左对齐，另一个右对齐。

这是我的代码：

<div class="member_top" style="padding:15px; background:#DDD;">
    <div class="member_top_wrap" style="width:960px; margin:0 auto; position:relative;">
        <div class="member_top_left" style="display:inline-block; width:480px;">Left</div>
        <div class="member_top_right" style="display:inline-block; width:480px;">Right</div>
    </div>
</div>

我尝试使用左右定位在两个内部元素上添加相对于member_top_wrap和绝对的位置，但是15px填充不起作用。有人可以解释一下如何实现这个目标吗？

这是一个举例说明的例子：

我不是在寻找两个元素之间的填充，如图所示，我添加了间隙来定义两个元素。

Answer 1

您可以简单地浮动div，然后清除浮动的底部，

<div class="member_top" style="padding:15px; background:#DDD; width: 960px;">
<div class="member_top_wrap" style="margin:0 auto; position:relative;">
    <div class="member_top_left" style="display:inline-block; width:480px;float: left;">Left</div>
    <div class="member_top_right" style="display:inline-block; width:480px;float: left;">Right</div>
    <div style="clear: both;"></div>
</div>
</div>

Demo here

作为旁注......你真的不想用内联样式来做这件事。样式表效率更高。

Answer 2

检查此链接 http://jsfiddle.net/bbmG6/1/

.member_top_wrap{
    width:960px;
    padding:15px;
    background:red;
    float:left;
}
    .member_top_left{
    float:left;
    width:480px;
    background:yellow;
}
.member_top_right{
    float:right;
    background:green;
    width:480px;
}​

Answer 3

使用display: inline-block时，inline-block元素之间的空格会变成元素之间的间隙。要消除此差距，请将font-size设置为0，然后为子元素恢复font-size（通常使用较高的'px'值，但对于更多最新的浏览器'rem' [root em]也可以使用。）

或删除元素之间的空格：

<div class="member_top_wrap"
    ><div class="member_top_left"></div
    ><div class="member_top_right"></div
></div>

或者只使用display: table作为包装器，使用display: table-cell作为其子元素。