Css 在包装器元素中定位两个元素

我在尝试将两个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>

左边
正当

我尝试在两个内部元素上添加相对于

成员_top _wrap

的位置和绝对位置，使用左和右定位，但是15px填充不起作用。有人能解释一下如何做到这一点吗

这是一个示例：

---

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

您可以简单地浮动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>

左边
正当

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

检查此链接

---

使用

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

。

左右浮动一个。谢谢，我确实在外部样式表中编写CSS。因为我不熟悉CSS布局，远离表格，我倾向于使用内联样式设计页面的一部分，因为这样会更快出错：）当我做对了，我会将样式复制到外部样式表，清理我的代码。我没有对此投反对票，我不知道为什么会有人这样做，当人们懒得解释原因时，我很恼火。但是，我没有接受你的答案，因为在你使用float:left on.member\u top\u wrap的地方，它导致了.member\u top及其父容器的一些问题。我将为你将此投票返回到0，因为你很友好，用一个演示写了一个很好的答案。@PraveenVijayan我反对你，因为你的css解释是错误的。如果子元素中有一个float，那么它们会给overflow：hidden to是一个父元素来清除它，而不是给它float，这是错误的。请检查此项以获取更多信息，martin-谢谢@sandeep-感谢您对“为什么投票被否决”的解释。但是，如果您给float：左移到其父容器以清除float，如果您确定该float会产生什么效果，那么没有什么错。溢出方法在某些情况下（自动和隐藏）会产生问题。清除浮动的方法很多。我正在使用clearfix来完成这项工作。因为我不知道martin页面中的其他元素，所以我提出了一个解决方案。答案不值得投反对票。但我的解决方案不适合马丁。这不是我想要的，对不起，我想你搞错了。

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