将两个 div 与 CSS 和 React 并排排列

Line two divs side by side with CSS and React

提问by Naomi

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

如图所示，我有两个组件要并排排列：

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

我正在使用 React 和带有Negotiation,的组件frontend，并且food具有从另一个组件传递的元素。

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

我如何设置样式以使每个元素 ( Negotiation,Frontend和food) 彼此分开，但仍位于同一列中，旁边排列着新闻？

My JavaScript:

我的 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'));

My CSS:

我的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;
}

So basically, in between each Courseelement I would want space (preferably set with Margin), and I want the Newsboxcomponent to line up with the Courseboxcomponent.

所以基本上，在每个Course元素之间我想要空间（最好用 设置Margin），并且我希望Newsbox组件与Coursebox组件对齐。

回答by Aatif Bandey

Solution to bring new Newsboxcomponent next to Coursebox

将新Newsbox组件放在旁边的解决方案Coursebox

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

CSS

CSS

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

回答by Enes Tufekci

If you want style difference between Course components you can pass a className using props when you call the component. Or if you are using bootstrap you can just pass "well" or "panel" class.

如果您想要 Course 组件之间的样式差异，您可以在调用组件时使用 props 传递 className。或者，如果您使用引导程序，您可以只通过“well”或“panel”类。

For example;

例如;

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

http://getbootstrap.com/components/#panels

http://getbootstrap.com/components/#panels

回答by Nalan Madheswaran

Here you go.

干得好。

const ParentDiv = styled.div`
  & {
    width: 100%;
  }
`;

const ChildDiv = styled.div`
  & {
    display: inline-block;
    vertical-align: text-top;
    margin: 0 auto;
  }
`;