Question

import React from 'react';
import ReactDOM from 'react-dom';
import { NavBar } from './NavBar.js';
import {Parent} from './Parent.js';

class ProfilePage extends React.Component {
    render() {
        return (
            <div style={{flexDirection:'row'}}>
                 <NavBar />
                 <Parent />
            </div>
        );
    }
}

ReactDOM.render(<ProfilePage />, document.getElementById('root') );

我正在尝试水平显示NavBar和Parent。我用flexDirection:'row'尝试了它，但它没有用。有人可以帮我解决吗？提前致谢。

Answer 1

要使用flexbox，您需要一个display flex parent

所以你可以将这两个组件包装成一个div 然后将display flex添加到该div并应用弯曲方向：行;到父div，它应该工作，或如果您不想使用flexbox，请添加display：inline-block 对于每个包装器组件

Answer 2

那样的东西？我用flex＆amp; flex-direction: column使两个部分成为一个在另一个之上。

注意内容被拉伸以占用剩余区域，这是由flex: 1 1 auto

完成的

html,
body {
  height: 100%;
  margin: 0;
}

.wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}

nav {
  display: block;
  width: 100%;
  background-color: rgba(255, 0, 0, 0.2);
}

main {
  flex: 1 1 auto;
  background-color: rgba(255, 0, 0, 0.4);
}

<div class="wrapper">
  <nav>
    <ul>
      <li>Lin 1</li>
      <li>Link 2</li>
      <li>Link 3</li>
    </ul>
  </nav>
  <main>
    content
  </main>
</div>

如何水平显示两个组件

2 个答案: