html中怎样使组件并排排列,用CSS和React排列两个div并排

由于图像显示我有两个组件，我想并排放置。 用CSS和React排列两个div并排

我正在使用React和具有协商，前端和食物的组件具有从另一个组件传递的元素。 我该如何设计这种风格，以便每个元素(谈判，前端和食物)彼此分离，但仍然位于同一列，旁边排列着新闻？

我的JS

class Course extends React.Component {

render() {

return (

{this.props.coursename}

{this.props.status} {this.props.progress}

Start exercise

);

}

}

class Welcomebox extends React.Component {

render() {

return

Welcome Naomi

;

}

}

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

class Coursebox extends React.Component {

render() {

return (

);

}

}

class Newsbox extends React.Component {

render(){

return (

News

);

}

}

class Dashboardbox extends React.Component {

render(){

return(

);

}

}

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;

}

因此，基本上，每个课程元素我想空间(最好设定保证金)之间和我希望新闻组件与Coursebox组件对齐。如果你想场组件之间的风格差异，你可以在调用组件使用道具传递一个类名

2016-09-26

Naomi

+0

你可以用你的'Newsbox'组件和'Coursebox'组件在一个'div'？ –

+0

您是否尝试过使用FlexBox？ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ –

+0

我已经将它包裹在一个div中。在反应中，您必须这样做才能将多个元素传递给另一个组件。 @AatifBandey –