用CSS和React排列兩個div並排

由於圖像顯示我有兩個組件，我想並排放置。用CSS和React排列兩個div並排

我正在使用React和具有協商，前端和食物的組件具有從另一個組件傳遞的元素。我該如何設計這種風格，以便每個元素（談判，前端和食物）彼此分離，但仍然位於同一列，旁邊排列着新聞？

我的JS

class Course extends React.Component { 
    render() { 
return (
<div > 

    <div className="coursecontent"> 
     <h3>{this.props.coursename}</h3> 
     <h4> {this.props.status} {this.props.progress}</h4> 
    </div> 
    <button className="coursecontent">Start exercise</button> 


</div> 
); 
} 
} 

class Welcomebox extends React.Component { 

render() { 
    return <h1>Welcome Naomi</h1>; 
} 
} 

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

class Coursebox extends React.Component { 
    render() { 
return (
<div className="box-field"> 


    <Course coursename="Negotiation" progress= "20%" status="Progress"/> 
    <Course coursename="Frontend" progress="56%" status="Progress"/> 
    <Course coursename="Food" status="Progress" progress="43%"/> 

</div> 

); 
    } 
} 


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


class Dashboardbox extends React.Component { 
render(){ 
    return(
     <div className="dashboardbox">

 </div> 
    ); 
    } 
} 

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

你可以用你的'Newsbox'組件和'Coursebox'組件在一個'div'？ –

您是否嘗試過使用FlexBox？ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – Zeus77

我已經將它包裹在一個div中。在反應中，您必須這樣做才能將多個元素傳遞給另一個組件。 @AatifBandey – Naomi

解決方案帶來新Newsbox組件旁邊Coursebox

import Coursebox from './Coursebox'; import Newsbox from './Newsbox' class ContainerRow extends React.Component { render(){ return ( <div className='rowC'> <Coursebox /> <Newsbox /> </div> ); } }

的CSS .rowC{display:flex; flex-direction:row;}

來源

2016-09-26 12:01:40

感謝您的CSS。（y）的 – ambar

。或者如果你使用引導，你可以通過「好」或「面板」類。

例如;

class Course extends React.Component { 
    render() { 
    return (
    <div class="panel panel-default"> 
     <div class="panel-heading">{this.props.coursename}</div> 
     <div class="panel-body"> 
      <h4> {this.props.status} {this.props.progress}</h4> 
      <button className="coursecontent">Start exercise</button> 
     </div> 
     </div> 
    </div> 
); 
} 
}

http://getbootstrap.com/components/#panels

來源

2016-09-26 12:09:31

用CSS和React排列兩個div並排

回答

相關問題