web-dev-qa-db-fra.com

Ligne deux divs côte à côte avec CSS et React

Comme le montre l'image, j'ai deux composants que je veux être côte à côte et alignés:  Dashboard

J'utilise React et le composant avec Negotiation, frontend et food contient des éléments transmis par un autre composant. 

Comment est-ce que j'appelle ceci de sorte que chaque élément (Negotiation, Frontend et food) soit séparé l'un de l'autre mais toujours dans la même colonne avec les nouvelles alignées à côté? 

Mon JavaScript:

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">
        <Coursebox />
        <Newsbox />
      </div>
    );
  }
}

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

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

Donc, fondamentalement, entre chaque élément Course, je voudrais de l’espace (défini de préférence avec Margin), et je veux que le composant Newsbox soit aligné avec le composant Coursebox.

cssreactjs
6
Naomi

Solution pour amener le nouveau composant Newsbox à côté de 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;}
18
Aatif Bandey

Voici.

const ParentDiv = styled.div`
  & {
    width: 100%;
  }
`;

const ChildDiv = styled.div`
  & {
    display: inline-block;
    vertical-align: text-top;
    margin: 0 auto;
  }
`;
0
Nalan Madheswaran

Si vous souhaitez une différence de style entre les composants du cours, vous pouvez transmettre un className à l'aide d'accessoires lorsque vous appelez le composant. Ou si vous utilisez bootstrap, vous pouvez simplement passer la classe "well" ou "panel". 

Par exemple; 

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

0
Enes Tufekci