0

我使用这个 CSS：

#header-topbar {
    width:100%;
    height:120px;
    padding-top:5px;
}
#header-right-content {
    float:right;
    margin-right:14%;
    margin-top:20px;
    font-size:20px;
    text-align:right;
    color:#000000;
}
#logo {
    position: absolute;
    float: left;
    margin-left: 15%;
    margin-top: 25px;
    width: 360px;
    height: 50px;
}

对于我的标题，我想让它响应。我知道如何使用媒体查询，但我不确定 CSS 的其余部分。

我如何使它使徽标 div 显示在顶部，居中，然后在下面显示文本？

我在这里创建了一个小提琴：http: //jsfiddle.net/bMsMw/所以你可以看到 html

谢谢

4

2 回答 2

2

检查这个演示

为了#header-topbar使高度易于操作，media query不应该说明，
这就是#logo为什么position:absolute您的徽标不会下降的原因之一，因为absolute:position它显示在元素的顶部，

#header-topbar {
    float:left;
    width:100%;
    padding-top:5px;
}
#header-right-content {
    float:right;
    margin-right:14%;
    margin-top:20px;
    font-size:20px;
    text-align:right;
    color:#000000;
}
#logo {
    float: left;
    margin-left: 15%;
    margin-top: 25px;
    width: 360px;
    height: 50px;
}
#logo img {
    max-width:100%;
    width:100%;
}
@media handheld, screen and (max-width: 620px){
    #logo{
        width:70%;
        float:none;
        margin-left:auto;
        margin-right:auto;
    }
    #header-right-content {
        float:left;
        width:100%;
        text-align:center;
    }

}

希望这对你有帮助..

于 2013-05-16T00:28:40.967 回答
0

像这样？http://jsfiddle.net/bMsMw/1/ 不完全确定图像应该如何适合。

code
于 2013-05-15T23:46:21.873 回答