css - react : Relative positioning of two divs within div

Question

我有一个容器 div，其中包含另外两个 div。我希望容器中的两个 div 分别距离容器 div 的左侧 10% 和右侧 10%。但是，只有左边的做我想要的，而右边的没有。为什么会这样？

App.js

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";

class App extends React.Component {
  render() {
    return (
      <div className="screenDiv">
        <div className="topContainer" />
        <div className="botContainer">
          <div className="LeftDiv" />
          <div className="RightDiv" />
        </div>
      </div>
    );
  }
}

export default App;

应用.css

.screenDiv {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.topContainer {
  width: 100%;
  height: 80%;
  background-color: #c6e2f4;
}

.botContainer {
  width: 100%;
  height: 20%;
  background-color: #f9aff9;
}

.LeftDiv {
  width: 5%;
  height: 20%;
  position: relative;
  top: 50%;
  left: 10%;
  background-color: green;
}

.RightDiv {
  width: 5%;
  height: 20%;
  position: relative;
  top: 50%;
  right: 10%;
  background-color: #ff0000;
}

Answer 1

我们可以为此使用 flexbox。 我们只需要在你的 css 中修改这个类，其余的将正常工作 -:

.botContainer {
  width: 100%;
  height: 20%;
  background-color: #f9aff9;
  display: flex;
  justify-content: space-between;
}

这是一个工作演示 -> https://stackblitz.com/edit/react-kuusz8