Question

这是我的代码＆gt;＆gt; 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像素，所以一切都到位。哪一个是最好的方法呢？

如果我给社交一个相对位置，我可以通过简单地添加590px的正确属性来做到这一点。这是正确的方法吗？它不是那么优雅！此外，如果我向右漂浮，它将不再在容器上（因为我浮动它）。

在处理CSS时，这一直困扰着我。我希望你们能帮忙！

Answer 1

您需要做的是将.social-div的浮动设置为右侧。为了让包装器仍然包装其所有子节点，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/

Answer 2

检查这个

http://jsfiddle.net/374Rk/17/

.social{
    width: 200px;
    height: 25px;
    background-color: #FF0;
    margin-right:0px;
    margin-left:590px;
}

Answer 3

如果您不想将其浮动（并更正所有内容），则可以将text-align: right;添加到.container和display: inline-block; margin-right: 20px;添加到.social。

http://jsfiddle.net/374Rk/3/

但我不知道你想在每个div里面想要什么。因此，您可能需要为每个text-align: left;添加div。

Answer 4

马丁内斯，
我已经读完了你的查询并找到了使用JQuery的解决方案。

$(document).ready(function() {    
    $('.container div').each( function() {   
        container = $(this).attr('class');  
        content = $(this);  
        if(content == "social"){  
            $( ".container" ).addClass( "social" );  
        }  
    });  
});

检查以下网址
http://jsfiddle.net/374Rk/30/

Div里面的Div对齐？

4 个答案: