反応内のコンポーネント内の2つの要素のインラインブロックを使用

Question

2つの要素が渡されたコンポーネントがあります。私は2つの要素を並べて表示したい。私はCSSでdisplay：inline-blockを使用しようとしましたが、実際には2つの要素を並べて配置しません。要素のサイズを同じにして、各要素が画面の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> 
    } 
} 

あなたは、スタイルdashboardboxする必要はありません。