我有三个主要组成部分。其中的两个占据了屏幕的1/3左右,我的目标是从左到右水平显示它们。
当像我添加的代码中那样放置它们时,它们一个接一个地垂直呈现,这导致uder向下滚动找到它们。如何在屏幕上水平显示它们? (我用CSS尝试了几件事,但没有成功。)
这是返回方法,“表”组件内部包含两个不同的表:
return (
<div>
{title} <Chat />
<Tables/>}
</div>
);
答案 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
而不是创建组件,但是我认为您了解网格的“操作方法”规则。