如何水平显示两个组件

-1

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'但它没有奏效。有人可以帮我解决它吗？提前致谢。如何水平显示两个组件

来源

2017-08-29 12345

做可以增加你的'NavBar'和'Parent'一些代码？和屏幕截图 –

要与Flexbox的工作，你需要一个显示器挠性父

所以你可以这两个部件包装成一个DIV 然后添加显示器挠性到该分区和应用弯曲方向：行;它应该工作，或如果你不想使用flexbox所以添加显示：每个包装组件的内联块

来源

2017-08-29 04:35:50

像这样的东西？我已使用flex & 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>

来源

2017-08-29 05:02:17 felixmosh

如何水平显示两个组件

回答

相关问题