Question

有了以下代码，M试图将第二个div放在中心，不知何故它不会出现，我不想在减号中使用保证金：

这是html和css

 <div id="headerLeft">
    <div id="imgsection">
        <div class="logo"></div>
    </div>    
    <div id="usersection">
        <div class="user">Sign</div>
        <div class="location">Find</div>
    </div>
</div>

我的CSS

#headerLeft {
    width:45%;
}
#headerLeft #imgsection {
    width:150px;
}
#headerLeft #imgsection .logo {
    background: url('../img/logo.png') no-repeat;
    background-size: cover;
    width:88px;
    height:71px;
    width:100px;   
}

#headerLeft #usersection {
    float:right; 
    width:200px;
    margin: auto;
}
#headerLeft #usersection .user {
    width:80px;
    float:left;
}
#headerLeft #usersection .location {
    width:80px;
    float:left;
}

检查这个小提琴

http://jsfiddle.net/CF6kX/

第二个用id覆盖：usersection需要介于两者之间，目前它出现在底部

Answer 1

从此CSS

中删除float：right

 #headerLeft #usersection 
{
   float:right;  
   width:200px;
   margin: auto;
}

FIDDLE

Answer 2

在图像部分添加属性float：left，增加下面的headerleft宽度是代码

  #headerLeft {
            width: 58%;
        }
        #headerLeft #imgsection {
            width:150px;
float: left;
        }
        #headerLeft #imgsection .logo {
            background: url('../img/logo.png') no-repeat;
            background-size: cover;
            width:88px;
            height:71px;
            width:100px;   
        }

        #headerLeft #usersection {
            float:right; 
            width:200px;
            margin: auto;
        }
        #headerLeft #usersection .user {
            width:80px;
            float:left;
        }
        #headerLeft #usersection .location {
            width:80px;
            float:left;
        }

把第二个div放在中心是失败的

2 个答案: