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

我有几个问题试图定位两个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的填充不工作。有人可以请解释如何实现这一目标？

这是一个图示的例子：

enter image description here

我不是寻找在如在图中所示的两个元件之间的填充，我添加的间隙，以限定的两个要素。

来源

2012-02-26 TheCarver

浮起一个左边和另一个右边。 – j08691 2012-02-26 05:34:25

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

作为一个侧面说明...你真的不想用内联样式要做到这一点。样式表效率更高。

来源

2012-02-26 05:35:09 Scott

谢谢，我确实在外部样式表中写了我的CSS。由于我对CSS布局不熟悉，因此不再使用表格，我倾向于使用内联样式设计页面的一部分，因为它会更快地出错:)当我把它正确的时候，我将样式复制到我的外部样式表，清理我的代码。 – TheCarver 2012-02-26 22:47:24

检查此链接 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; 
}

来源

2012-02-26 05:40:56

为什么要投票？（ – 2012-02-26 12:52:48

）我没有投票表决，我不知道为什么有人会这样做，当人们无法解释原因时，它会让我很烦恼。但是，我没有接受你的答案，因为你在哪里使用float：留在.member_top_wrap上，它对.member_top及其父容器造成了一些问题。 – TheCarver 2012-02-26 22:52:06

我会将它投票回0给你，因为你足够善意地用演示写出一个好答案。 – TheCarver 2012-02-26 22:52:57

-1

当使用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。

来源

2012-02-26 09:17:36

这不是我要求的，对不起，认为你的棍棒结束了。 – TheCarver 2012-02-26 22:53:45

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

回答

相关问题