0

サイドバーを流動的にしてブラウザウィンドウに合わせて調整しようとしています。メディアクエリを追加するとCSSスタイルが壊れることを除いて、すべてがうまく機能しているようですが、クエリを削除すると、スタイルシートの標準的なスタイルに戻ります。誰かが私のコードを見て、私が間違っていることを教えてもらえますか？前もって感謝します！

ところで、2番目の末尾の中括弧を#rightandoverviewメディアクエリに追加すると、スタイリングは元の状態に戻りますが、流動性が機能しません。どうなり得るか？

#righthandoverview {
position: absolute;
top: 91px;
right: 0px;
width: 20%;
height:215px;
background-color: white;
webkit-box-shadow: 0px 4px 5px -5px #777;
-moz-box-shadow: 0px 4px 5px -5px #777;
box-shadow: 0px 4px 5px -5px #777;
}

@media screen and (max-width:830px) and (min-width:100px) {
#righthandoverview {
    float: left;
    width: 30%;
    background-color: yellow;
    margin-top: 5px;

}





#righthandoverview ul {
position: absolute;
display: inline;
float: left;
font-family: klavika-light;
list-style-type: none;
text-decoration: none;
white-space: nowrap;
}

@media screen and (max-width:830px) and (min-width:100px) {
#righthandoverview ul {
    float:left;
    width:30%;
    background-color: yellow;
    margin-top: 10px;

}
}




#righthandoverview ul li > a {
display: inline;
text-decoration: none;
color:#8BAFDA;
}   

#righthandoverview ul li {
padding-bottom: 6px;
}
4

2 に答える 2

0

最初のメディアクエリを終了するためのブラケットが欠落しているようです

@media screen and (max-width:830px) and (min-width:100px) {
#righthandoverview {
    float: left;
    width: 30%;
    background-color: yellow;
    margin-top: 5px;

}





#righthandoverview ul {
position: absolute;
display: inline;
float: left;
font-family: klavika-light;
list-style-type: none;
text-decoration: none;
white-space: nowrap;
}
}
于 2012-09-26T02:42:44.760 に答える
0

次のコードで角かっこを見逃しました。追加しました。 

 @media screen and (max-width:830px) and (min-width:100px) {
        #righthandoverview {
            float: left;
            width: 30%;
            background-color: yellow;
            margin-top: 5px;

        }
    }
于 2012-09-26T04:03:43.090 に答える