如何在 React 中并排显示 2 个不同的容器?
P粉347804896
P粉347804896 2023-09-05 23:17:45
[CSS3讨论组]
<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 ( &lt;&gt; &lt;div className="Order"&gt; &lt;OrderPanel /&gt; &lt;OrderMenu/&gt; &lt;/div&gt; &lt;/&gt; ); }; 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 ( &lt;&gt; &lt;div className="Order-Menu"&gt; &lt;Container&gt;Order Menu&lt;/Container&gt; &lt;/div&gt; &lt;/&gt; ); } 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 ( &lt;&gt; &lt;div className="Order-Panel"&gt; &lt;Container&gt;Order Panel&lt;/Container&gt; &lt;/div&gt; &lt;/&gt; ); } 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>
P粉347804896
P粉347804896

全部回复(1)
P粉757556355

遵循 mui 文档(一种方法)

另一方面,要并排放置两个容器,您可以使用 Grid mui 组件

<Grid container spacing={2}>
    <Grid item xs={6}>
      <Item>xs=6</Item>
    </Grid>
    <Grid item xs={6}>
      <Item>xs=6</Item>
    </Grid>
</Grid>

生成一个容器 结果输出

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号