尝试创建响应式布局，但右侧div不断将左侧的div推到上方

Question

我有一个带有两列的react组件。在左侧，我有一个日历，在右侧，我有一个带有一些文本的部分以及一个输入和选择字段。

每当我开始最小化窗口时，右侧元素就会向左侧推动，直到它们位于日历的顶部。

我正在尝试对其进行设置，以使窗口越小，内容将保留在原位并优雅地失败，而不是彼此重叠。

[Fatal Error] :1:10703: The entity name must immediately follow the '&' in the entity reference.
org.xml.sax.SAXParseException; lineNumber: 1; columnNumber: 10703; The entity name must immediately follow the '&' in the entity reference.
    at java.xml/com.sun.org.apache.xerces.internal.parsers.DOMParser.parse(DOMParser.java:261)
    at java.xml/com.sun.org.apache.xerces.internal.jaxp.DocumentBuilderImpl.parse(DocumentBuilderImpl.java:339)
    at DomParserDemo.main(DomParserDemo.java:17)

Answer 1

通过查看您的CodeSandbox示例，看起来主要问题是日历占据了固定宽度。列宽可以正常工作，但是日历无法调整，因此看起来好像内容是重叠的。

我不确定您要使用哪种布局，但是通过查看antd documentation on responsive Grid，您应该能够在不同的屏幕尺寸下提供不同的列跨度。因此，您可以执行以下操作：

<Row>
  <Col xs={24} md={12}>
    <Calendar className="myClassname" />
  </Col>
  <Col xs={24} md={12}>
    Selected Date: <input />
    <TimeSelection>
      ...
    </TimeSelection>
  </Col>
</Row>

以最小大小（xs）为每列提供24个跨度将使它们占据整个宽度，从而导致它们堆叠。然后以md的大小将它们都设置为跨度为12，就像现在一样。

Answer 2

这是一种响应式问题，日历大小是静态应用的。 使用下面的CSS来解决该问题。（将CSS添加到底部的Calander.css文件中）

/* make calendar fit to column */ 
.react-datepicker,
.react-datepicker__month-container {
  width: 100%;
}
/* change calendar column width dynamically */ 
.myClassname,
.react-datepicker__day-name,
.react-datepicker__day,
.react-datepicker__time-name {
  width: 12%;
}