Html 在站点左侧放置横幅,并将横幅与内容右侧对齐
我将内容设置为1024px宽度,并与中心对齐。现在我想在左边挂个横幅。因为横幅可以有不同的大小,所以我必须将横幅对齐到右侧。旗帜用锚包裹着。在下面的示例中,我使用了div而不是图像 HTML:Html 在站点左侧放置横幅,并将横幅与内容右侧对齐,html,css,banner,Html,Css,Banner,我将内容设置为1024px宽度,并与中心对齐。现在我想在左边挂个横幅。因为横幅可以有不同的大小,所以我必须将横幅对齐到右侧。旗帜用锚包裹着。在下面的示例中,我使用了div而不是图像 HTML: 文本对齐:右对齐不起作用。从#background中删除宽度:20px,在本例中,它起作用,因为我使用div作为背景。如果我在这里切换到一个图像,它似乎也能工作。但实际上,我有一个没有宽度和高度属性的图像。在这里它不起作用。你知道为什么吗?我发现了错误。在我的真实场景中,横幅没有宽度。所以它不起作用。
文本对齐:右对齐代码>不起作用。从#background
中删除宽度:20px
,在本例中,它起作用,因为我使用div
作为背景。如果我在这里切换到一个图像,它似乎也能工作。但实际上,我有一个没有宽度和高度属性的图像。在这里它不起作用。你知道为什么吗?我发现了错误。在我的真实场景中,横幅没有宽度。所以它不起作用。
<div id="content">
<div id="banner">
<a href="#"><div id="background">banner</div></a>
</div>
<div id="maincontent">
SSSSSSSSSSSSSSSSSSSSSSSSS
OOOOOOOOOOOOOOOOOOOOOOOOO
MMMMMMMMMMMMMMMMMMMMMMMMM
EEEEEEEEEEEEEEEEEEEEEEEEEEE
CCCCCCCCCCCCCCCCCCCCCCCCC
OOOOOOOOOOOOOOO
NNNNNNNNNNNNNNNNNNNNNNN
TTTTTTTTTTTTTTTTTTTTT
EEEEEEEEEEEEEEEEEEEEE
NNNNNNNNNNNNNNNNNNNNNNNNNN
TTTTTTTTT
</div>
</div>
#content {
width: 400px;
margin: 0 auto;
background-color: red;
position: relative;
}
#background {
width: 20px;
height: 100px;
background-color: blue;
color: white;
}
#banner{
position: absolute;
left: -200px;
width: 200px;
height: 100px;
background-color: yellow;
text-align: right;
}