有以下代码,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;
}
检查这个 fiddle
第二个被id: usersection覆盖的需要介于两者之间,目前它出现在底部
最佳答案
在图片部分添加属性 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;
}
关于html - 将第二个 div 置于中心失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24862189/