0

メディアクエリを使用して別のレイアウトを設定しようとしていますが、画面幅に応じて div レイアウトを定義することに問題があります

これはフィドルの結果です

そして 、私が使用しているフィドルテストプロジェクト

問題は、他のスタックの上にスタックしたいことです

red
green 
blue

1200 px 未満の場合

私は何を間違っていますか？

4

4 に答える 4

1

これがあなたが望むものかどうかはわかりませんが、これをチェックしてください：http://jsfiddle.net/4v6FC/11/embedded/result/

CSS ルールの優先順位に問題があると思います。要素displayの style 属性で定義されたプロパティはdiv、画面サイズに関係なく、スタイルシートで定義されたプロパティよりも優先されます。divこの例では、メディア クエリ以外のすべての要素に対してこのプロパティを設定displayし、style 属性からプロパティを削除しました。

これはセスルールの優先順位を説明する記事です: http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/

于 2013-05-15T11:42:51.400 に答える
1

あなたが抱えている主な問題は、CSS が @media コードを無視していることです。インライン CSS を使用しており、インライン CSS ルールは常に外部 CSS ルール (== @media コード) から優先されます。

CSS のカスケード順序について読むことをお勧めします: http://monc.se/kitchen/38/cascading-order-and-inheritance-in-css

jsfiddle の場合、すべてのコードを からstyle="..."右側の CSS フレームに転送し、内部 CSS ではなく外部 CSS にします。次に、次のように並べ替えます。メディアでデフォルトの css をオーバーライドする場合は、オーバーライドするコードの下に @media セレクターを配置します。

于 2013-05-15T11:38:37.383 に答える
0

クラスdisplay:blockの代わりに使用してみてくださいdisplay:inline-blockMiddle

于 2013-05-15T11:30:55.313 に答える
0

問題は、幅を取り、 を持っている 3 つのコンテナーがあることdisplay:inline-blockです。したがって、それらは互いに平行に配置されます。この動作が必要な場合は、外側のコンテナでそれらをワープし、ではなく でmin-widthdiv 幅を指定して、その位置に固定して配置するように設定する必要があります。こちらを参照してください。px%

要素を互いに積み重ねたい場合は、 を使用する必要がありますdisplay:block。この場合、他に何も必要ありません。

于 2013-05-15T11:42:00.497 に答える