css - Div 内的 Div 对齐？

Question

这是我的> http://jsfiddle.net/374Rk/1/

<div class="container">
    <div class="logo"></div>
    <div class="buttons"></div>
    <div class="chef"></div>
    <div class="social"></div>
</div>

如您所见，我在一个大的 div 容器中有几个 div。一切都居中，但我希望社交 div(最后一个)保持在右边，边距为 20 像素，这样一切就位。哪一个是最好的方法？

如果我给 social 一个相对位置，我可以通过简单地添加 590px 的正确属性来做到这一点。这是正确的方法吗？这不是那么优雅!另外，如果我正确地漂浮它，它就不会再在容器上(因为我漂浮了它)。

在处理 CSS 时，这一直困扰着我。希望大家帮帮忙!

Answer 1

您需要做的是将 .social-div 的 float 设置为正确的。为了让包装器仍然包装它的所有 child ，clearfix 可以提供帮助:

HTML:

<div class="container">
    <div class="logo"></div>
    <div class="buttons"></div>
    <div class="chef"></div>
    <div class="social"></div>
    <div style="clear:both;"></div>
</div>

CSS:

.social {
    width: 200px;
    height: 25px;
    float:right;
    margin-right:20px;
    background-color: #FF0;
}

http://jsfiddle.net/AvLU8/