Компонент страницы будет перекрываться при изменении размера моего браузера

Question

У меня есть следующие компоненты внутри моей веб-страницы; календарь и выбор даты: -

И я установил макет календарь с выбором даты следующим образом: -

.calender 
{ 
Width:75% !important; 

    } 

#datepicker{ 

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

Теперь Если браузер максимально макет будет хорошо, но когда я изменить размер моего браузера выбор даты и календарь накладывается следующим образом: -

так может кто-нибудь совет, как решить эту проблему макета, поэтому календарь и дата пикет не пересекаются? С уважением

Answer 1

Вы могли бы сделать:

clear:both; 

Если календарь не был установлен абсолютный, кроме этого - вы можете использовать медиа-запросы, чтобы настроить процент календаря на ряд выше, так что это не перекрывается.

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries - хорошая статья, чтобы узнать о медиа-запросах.

Answer 2

Если вы хотите, чтобы они были в положении и не хотели, чтобы они были внизу, я имею в виду календарь сначала, а ниже - дату, а затем попробуйте установить min-width и overflow:scroll родительского элемента управления.

Rest вы можете изменить CSS как

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

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

дать попробовать, если вы можете поиграться демонстрационную тогда пожалуйста :)