在React

时间:2019-04-02 14:13:28

标签: css reactjs

我有三个主要组成部分。其中的两个占据了屏幕的1/3左右,我的目标是从左到右水平显示它们。

当像我添加的代码中那样放置它们时,它们一个接一个地垂直呈现,这导致uder向下滚动找到它们。如何在屏幕上水平显示它们? (我用CSS尝试了几件事,但没有成功。)

这是返回方法,“表”组件内部包含两个不同的表:

 return (
      <div>
        {title} <Chat />
        <Tables/>}

      </div>
    );

2 个答案:

答案 0 :(得分:1)

您应该看看flexboxes!

您可能知道,React允许您创建组件,以便您可以像使用flexbox的html元素一样对它们进行样式设置。

绝对请this article阅读!

修改:示例

HTML:

<div class="flexbox-container">
    <div>Element1</div>
    <div>Element2</div>
    <div>Element3</div>
</div>

CSS:

.flexbox-container {
    display: flex;
    flex-direction: row;
}

这将使您的元素在水平方向上以均匀的间距对齐! 尝试使用容器的边距和对齐元素来对齐元素。

答案 1 :(得分:0)

首先,我建议您改进您的问题:您说您有三个主要组成部分,但是在render()方法中,我看到了两个div和标题。这三个主要组成部分的标题是吗?
还是标题应该在Chat组件的上方,然后与Table组件并排放置?

无论如何,我认为标题恰好位于Chat组件的上方,并且它们与Table组件并排:看看这个小提琴:

window.styled = window.styled.default;

const AppContainer = styled.div`
    width: 500px;
    height: 300px;
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: 25% 75%;
`;

const Title = styled.div`
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    background: #BD5027;
    color: #F0F0F0;
    padding: 5px;
`;

const Chat = styled.div`
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    background: #276DBD;
`;

const Table = styled.div`
    grid-row: 1 / 3;
    grid-column: 2 / 3;
    background: #2FC849;
`;

class App extends React.Component {
    constructor(props) {
        super(props);
    }
    
    render() {
        const {title} = this.props;
        
        return (
            <AppContainer>
                <Title>{title}</Title>
                <Chat />
                <Table />
            </AppContainer>
        );
    }
}

ReactDOM.render(<App title="Hello World!" />, document.getElementById('root'));
@import url(https://fonts.googleapis.com/css?family=Montserrat);

body {
    font-family: 'Montserrat', sans-serif;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/styled-components/3.4.10/styled-components.min.js"></script>

<div id='root'></div>

现在,进行解释:我已经使用了基于网格系统的相当新的CSS规则。这些规则对于创建应用程序的框架非常有用,允许您创建一个网格系统,在其中可以呈现不同的项目。可以找到进一步的解释,例如,这里→https://css-tricks.com/snippets/css/complete-guide-grid/

如果我的假设是错误的,并且结果不是您想要的,请告诉我您想要实现的目标,我会尽力帮助您!

编辑:为简单起见,在此示例中,我使用styled-component而不是创建组件,但是我认为您了解网格的“操作方法”规则。