我的网站有一个 Logo ,两面都有图像。我知道 Logo 的宽度和高度,但图像各不相同。我在左上角放了一张图片,并做了一个 10px
边距。我现在想对另一边做同样的事情,但它不起作用。我做了 background-position
属性并将其设置为右上角,但它没有做任何事情。有什么问题?
CSS
#leftpic {
background-position: left top;
background: url('Images/left_pic.png') no-repeat;
height : 133px;
padding : 0;
margin: 10px 10px 10px 10px;
width: 138px;
}
#rightpic {
background-position: top right;
background: url('Images/left_pic.png') no-repeat;
height : 133px;
padding : 0;
width: 138px;
}
#masthead {
background-position: center bottom;
background: url('Images/logo.png') no-repeat center bottom;
height : 160px;
padding : 0;
margin: 10px auto 0 auto;
width: 910px;
}
HTML
<div id="masthead">
<div id="leftpic"></div>
<div id="rightpic"></div>
</div>
最佳答案
将 float: left
和 float: right
添加到您的 leftpic
和 rightpic
ids:
#leftpic {
background-position: left top;
background: url('Images/left_pic.png') no-repeat;
height : 133px;
padding : 0;
margin: 10px;
width: 138px;
float: left;
}
#rightpic {
background-position: top right;
background: url('Images/left_pic.png') no-repeat;
height : 133px;
padding : 0;
width: 138px;
float: right;
margin: 10px;
}
作为 CSS 最佳实践,我建议还使用 masthead-image
类来包含左右图像将使用的 CSS:
CSS:
.masthead-image {
width: 138px;
height: 133px;
margin: 10px;
padding: 0;
}
#leftpic {
background: url('Images/left_pic.png') no-repeat left top;
float: left;
}
#rightpic {
background: url('Images/right_pic.png') no-repeat right top;
float: right;
}
#masthead {
background: url('Images/logo.png') no-repeat center bottom;
height : 160px;
padding : 0;
margin: 10px auto 0 auto;
width: 910px;
}
HTML:
<div id="masthead">
<div id="leftpic" class="masthead-image"></div>
<div id="rightpic" class="masthead-image"></div>
</div>
关于html - 将图像对齐到右上角,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2036070/