Question

我有一个传递给它的两个元素的组件。我希望这两个元素并排显示。我试过在CSS中使用display：inline-block但它实际上不会将这两个元素并排放在一起。我希望元素大小相同，因此每个元素占据屏幕的50％。

我发现使用CSS进行风格的反应有点棘手。有什么建议如何使这项工作？这是我的组成部分。

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

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

和我的CSS

.course {
background-color: lightgrey;
margin-left: 20px;
height: 80%;
border-radius: 10px;
font-family: arial;
padding: 5px 10px 10px 10px;
margin-top: 10px;
}

.dashboard {
display: inline-block;
 }

Answer 1

Here's你想要什么

重要的部分：

.box-field {
  width: 50%;
  display: inline-block;
}


class Coursebox extends React.Component {
  render() {
    return <div className='box-field'> Course box </div>
  }
}

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

您不需要设置仪表板样式。

在反应中的组件内的2个元素上使用内联块

1 个答案: