将两个div与CSS和React并排放置 [英] Line two divs side by side with CSS and React

问题描述

如图所示，我有两个要排在一起的组件：

As the image shows, I have two components that I want to be side by side and lined up:

我正在使用React和具有谈判，前端和 food 的组件具有从另一个组件传递的元素。

I am using React and the component with Negotiation, frontend, and food has elements passed from another component.

如何设置样式，以便每个元素（谈判，前端和 food ）彼此分开，但仍在同一列中，并在其旁边排列新闻吗？

How do I style this so each element (Negotiation, Frontend and food) are separated from each other but still in the same column with news lined up next to it?

我的JavaScript：

My JavaScript:

class Course extends React.Component {
  render() {
    return (
      <div>
        <div className="coursecontent">
          <h3>{this.props.coursename}</h3>
          <h4> {this.props.status} {this.props.progress}</h4>
        </div>
        <button className="coursecontent">Start exercise</button>
      </div>
    );
  }
}

class Welcomebox extends React.Component {
  render() {
    return <h1>Welcome Naomi</h1>;
  }
}

ReactDOM.render(<Welcomebox />, document.getElementById('welcomebox'));

class Coursebox extends React.Component {
  render() {
    return (
      <div className="box-field">
        <Course coursename="Negotiation" progress= "20%" status="Progress"/>
        <Course coursename="Frontend" progress="56%" status="Progress"/>
        <Course coursename="Food" status="Progress" progress="43%"/>
      </div>
    );
  }
}

class Newsbox extends React.Component {
  render() {
    return (
      <div className="box-field" className="newsbox">
        <h3>News</h3>
      </div>
    );
  }
}

class Dashboardbox extends React.Component {
  render() {
    return (
      <div className="dashboardbox">
        <Coursebox />
        <Newsbox />
      </div>
    );
  }
}

ReactDOM.render(<Dashboardbox />, document.getElementById('dashboardbox'));

我的CSS：

.box-field,
.newsbox {
  width: 45%;
  background-color: lightgrey;
  font-family: arial;
  margin-left: 30px;
  height: 80%;
  padding: 5px 10px 10px 10px;
  border-radius: 10px;
  display: inline-block;
}

基本上，在每个课程之间元素，我想要空间（最好使用 Margin 设置），并且我希望 Newsbox 组件行

So basically, in between each Course element I would want space (preferably set with Margin), and I want the Newsbox component to line up with the Coursebox component.

推荐答案

解决方案以带来新的 Newsbox 组件位于 Coursebox

Solution to bring new Newsbox component next to Coursebox

import Coursebox from './Coursebox';
import Newsbox  from './Newsbox'
 class ContainerRow extends React.Component {
 render(){
    return (
        <div className='rowC'>
            <Coursebox />
            <Newsbox />
        </div>
    );
    }
 }

CSS

.rowC{display:flex; flex-direction:row;}

这篇关于将两个div与CSS和React并排放置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！