在反應中使用組件中的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個元素使用嵌入塊

回答

相關問題