Question

我想在Firefox中使用CSS在我的网站上显示徽标和flash横幅。

徽标应为250 X 250，横幅为800 X 250.两者都应显示在同一行。

这是我目前的CSS：

#logo{
    background:#FFFFFF;
    position:absolute;
    left: 0px;
    top: 0px;
    width: 250px;
    height: 200px;
}

#Banner{
    background: #1071A6;
    position:absolute;
    left: 250px;
    top: 200px;
    width: 850px;
    height: 250px;
}

不幸的是，横幅显示在徽标的底部。

有关如何正确定位这些元素的任何建议吗？

Answer 1

成功：

#logo {
    background:#FFFFFF;
    position:absolute;
    left: 0px;
    top: 0px;
    width: 250px;
    height: 200px;
}

#Banner {
    background: #1071A6;
    position:absolute;
    left: 250px;
    top: 0px;
    width: 850px;
    height: 250px;
}

两者都应为top: 0px;。

Answer 2

这里你去了

<html>
<head>
    <style type="text/css">

    #logo{
        background:#FFFFFF;
        position:absolute;
        left: 0px;
        top: 0px;
        width: 250px;
        height: 250px;
    }

    #Banner{
        background: #1071A6;
        position:absolute;
        left: 250px;
        top: 0px;
        width: 850px;
        height: 250px;
    }
    </style>

</head>
<body>
<div id ="logo"> 
</div> 
<div id="Banner">
</div>
</body>
</html>

Answer 3

也可能是他的外部容器宽度小于1100像素。需要考虑condsideration边距和填充。

Answer 4

我会做这样的标记：

<div id="Header">
    <div id="Banner"></div>
    <div id="logo"></div>
    <div style="clear:  both;"></div>
</div> <!-- /Header -->

这样的CSS。

#Header {
    width:  1120px;
}

#logo {
    position:  relative;
    float:  left;
    width:  250px;
    height:  200px;
    margin:  0;
    border:  1px solid blue;
}

#Banner {
    position:  relative;
    float:  right;
    width:  850px;
    height:  250px;
    margin:  0;
    border:  1px solid red;
}

使用CSS在Firefox中定位徽标和横幅时出现问题

4 个答案: