在反应中使用组件中的2个元素使用嵌入块

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

我觉得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; 
}

来源

2016-09-23 Naomi

这些css类在哪里被使用？你对dashboardbox有一个css规则吗？ – ajmajmajma

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> 
    } 
}

你不必风格dashboardbox。

来源

2016-09-23 13:29:46 lustoykov

该Coursebox中有几个元素，我希望有每个元素之间的间距，但现在它被视为一个div。任何想法如何保持每个元素之间的分离，并仍然使用它？ – Naomi

在反应中使用组件中的2个元素使用嵌入块

回答

相关问题