html - 押し下げ時のフローティングアイテムの幅を変更

Question

2 つの div が隣り合っています。左側は幅 600 ピクセル、右側は幅 200 ピクセルで、少し間隔が空けられています。どちらの div も左にフロートされているため、ページが小さいウィンドウに表示されると右側の div が下にドロップします。

必要なのは、その右側の div が拡張され、2 行目にプッシュされると幅が 600px になることです。しかし、一番上の行に 200px のスペースがある場合は、200px で表示したいと思います。

助けてください。

Answer 1

ページをモバイル デバイスに適応させようとしている場合は、メディア クエリを実際に検討する必要があります。

#yourSecondDiv {
    width: 200px;
}

@media only screen and (max-width : 799px) {
    #yourSecondDiv {
        width: 100%;
    }
}

また役立つかもしれません -標準デバイスのメディアクエリ

Answer 2

これが HTML または CSS で可能かどうかはわかりません。少し JavaScript が必要だと思います。その場合はJQueryを使用します。

Answer 3

それはあなたがjavascriptでできることのようです。ページ幅が小さいときに div が押し下げられたかどうかを確認できると思います。次に、CSS を交換して、幅を 600px にします。このようなもの。別の投稿で親切に説明されているように。これは機能する場合と機能しない場合があります。そうでない場合は、それは素晴らしいことです。解決策として思いついたことを教えてください。