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

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%;
}

试一试，如果你能搞定演示然后请做:)