如何在 React 中并排显示 2 个不同的容器？
<p>我想将订单面板和订单菜单并排放置，它们是两个不同的组件（容器）。在我的CSS中，我尝试了display: inline-block 和flex-direction:row。我已经在父组件（Order）上尝试了 flex，但它减少了两个组件的宽度。这是很简单的事情，但我做不到。有人可以指导我找出错误吗？</p>
<p>
<pre class="brush:js;toolbar:false;">import React from "react";
import Container from "@material-ui/core/Container";
import Stack from "@mui/joy/Stack";
import OrderPanel from "./OrderPanel";
import OrderMenu from "./OrderMenu";
import "./Order.css";
function Order() {
return (
<>
<div className="Order">
<OrderPanel />
<OrderMenu/>
</div>
</>
);
};
export default Order;
import React from "react";
import Container from "@material-ui/core/Container";
import Stack from "@mui/joy/Stack";
import OrderPanel from "./OrderPanel";
import "./Order.css";
function OrderMenu() {
return (
<>
<div className="Order-Menu">
<Container>Order Menu</Container>
</div>
</>
);
}
export default OrderMenu;
import React from "react";
import Container from "@material-ui/core/Container";
import Stack from "@mui/joy/Stack";
import "./Order.css";
import Order from "./Order";
function OrderPanel() {
return (
<>
<div className="Order-Panel">
<Container>Order Panel</Container>
</div>
</>
);
}
export default OrderPanel;</pre>
<pre class="brush:css;toolbar:false;">.Order {
background-color:darkkhaki;
height: 50%;
flex-direction: row;
}
.Order-Panel{
background-color: beige;
margin-left: 2vw;
margin-right: 60vw;
margin-top: 2vh;
height: 60vh;
width: 50vh;
flex-direction: row;
display: inline-block;
}
.Order-Menu{
background-color: aquamarine;
margin-top: 2vh;
margin-left:2vw;
height:10vw;
width: 45vh;
display: inline-block;
flex-direction: row;
}</pre>
</p>
1
1129
收藏
遵循 mui 文档（一种方法）
另一方面，要并排放置两个容器，您可以使用
Gridmui 组件<Grid container spacing={2}> <Grid item xs={6}> <Item>xs=6</Item> </Grid> <Grid item xs={6}> <Item>xs=6</Item> </Grid> </Grid>生成一个容器 结果输出