时间戳

首页 > 解决方案 > 尝试创建响应式布局，但右侧 div 不断推到左侧 div 的顶部

javascript - 尝试创建响应式布局，但右侧 div 不断推到左侧 div 的顶部

问题描述

我有一个包含两列的反应组件。在左侧我有一个日历，在右侧我有一个包含一些文本和一个输入和选择字段的部分。

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

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

编辑 blue-bash-32xik

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { Col, Row } from "antd";
import styled from "styled-components";
import "antd/dist/antd.css";
import Calendar from "./Calendar";

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <Row>
          <Col span={12}>
            <Calendar className="myClassname" />
          </Col>
          <Col span={12}>
            Selected Date: <input />
            <TimeSelection>
              Available Times:
              <select size={3}>
                <option>AM</option>
                <option>PM</option>
                <option>ANY</option>
              </select>
            </TimeSelection>
          </Col>
        </Row>
      </div>
    );
  }
}

const TimeSelection = styled.div`
  margin-top: 10%;
`;

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

标签： javascriptcssreactjs

解决方案

这是一种响应式问题，日历大小是静态应用的。使用下面的 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%;
}

推荐阅读