html - 如何对齐不同组件中的两个 div？

Question

我有两个组件如下:

class ParentComponent extends React.Component {
    return (
        <div>
            I am Div 1
        </div>
        <Child Component />
    )
}

ChildComponent 有另一个 div:

class ChildComponent extends React.Component {
    return (
        <div>
            I am Div 2
        </div>
    )
}

我想水平对齐 Div 1 和 Div 2。我怎样才能做到这一点？

Answer 1

class ParentComponent extends React.Component {
    return (
        <div className="container">
            <div>
                I am Div 1
            </div>
            <Child Component />
        </div>
    )
}


.container {
    display:flex;
}