搜尋

首頁  >  問答  >  主體

如何在 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>
P粉347804896P粉347804896435 天前688

全部回覆(1)我來回復

  • P粉757556355

    P粉7575563552023-09-06 18:39:28

    遵循 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>

    產生一個容器 結果輸出

    回覆
    0
  • 取消回覆