使用CSS和React将两个div并排放置在同一行

Question

如图所示，我有两个组件，想要它们并排放置且对齐：

我使用 React，带有 Negotiation、frontend 和 food 的组件具有来自另一个组件的元素。

我该如何设计样式，使得每个元素（Negotiation、Frontend 和 food）彼此分离，但仍位于同一列中，与旁边的新闻对齐？

我的 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'));

我的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;
}

基本上，我想在每个Course元素之间留出空间（最好使用Margin设置），并且我希望Newsbox组件与Coursebox组件对齐。

- Naomi

---

你能否将你的 Newsbox 组件和 Coursebox 组件包裹在一个 div 中？ - Aatif Bandey

你尝试过使用FlexBox吗？https://css-tricks.com/snippets/css/a-guide-to-flexbox/ - trve.fahad

我已将其包装在一个 div 中。在 React 中，你必须这样做才能将多个元素传递给另一个组件。@AatifBandey - Naomi

@Zeus77以前从未使用过flexbox，但我听说它可能会使事情变得更容易。我可能会研究一下。 - Naomi

@Naomi 谢谢。干杯 - Aatif Bandey

Answer 1

在Coursebox旁边添加新的Newsbox组件的解决方案

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

- Aatif Bandey

---

感谢提供 CSS。 (y) - ambar

没错 - 这个可以！ - Radu Bartan

Answer 2

给你。

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

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

- Nalan Madheswaran

Answer 3

如果您想在课程组件之间设置样式差异，可以在调用组件时使用props传递className。或者，如果您正在使用bootstrap，则可以直接传递“well”或“panel”类。

例如：

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

- Enes Tufekci