html - ブラウザのサイズを変更するとページコンポーネントが重なる

Question

Web ページ内に次のコンポーネントがあります。カレンダーと日付ピッカー:- ここに画像の説明を入力

そして、カレンダーのレイアウトと日付ピッカーを次のように設定しました:-

.calender
{
 Width:75% !important;

    }

#datepicker{

position:absolute;
right:5%;
top:5%;
}

ブラウザが最大化されている場合、レイアウトは問題ありませんが、ブラウザのサイズを変更すると、日付ピッカーとカレンダーが次のようにオーバーレイされます:- ここに画像の説明を入力

カレンダーと日付のピケットが重ならないように、このレイアウトの問題を解決する方法を誰かアドバイスできますか? よろしく

score 1 · Accepted Answer

それらをその位置に配置し、上下に配置したくない場合は、最初にカレンダーを意味し、その下に日付ピッカーを設定してから、親コントロールを設定min-widthしてみてください。overflow:scroll

CSSを次のように変更できます

.calender
{
 Width:75% !important;
position: relative;
float:left;
    }

#datepicker{
position:relative;
float : right;
right:5%;
top:5%;
}

デモを修正できる場合は、試してみてください:)

score 1 · Accepted Answer

次のことができます。

clear:both;

それ以外に、カレンダーが絶対的に配置されていない場合は、メディアクエリを使用して、カレンダーのパーセンテージをより高い数値に調整して、重複しないようにすることができます。

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queriesは、メディアクエリについて学ぶのに適した記事です。

html - ブラウザのサイズを変更するとページ コンポーネントが重なる