当我重新调整浏览器大小时，页面组件会重叠

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。

休息，你可以修改CSS为

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

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

给一个尝试，如果你能捣鼓出来的演示，那么请做:)