CSS：

body{ text-align: center;}div#root{ position: relative; width: 400px; height: auto; border: 0px solid black; margin: 8px auto; padding: 8px; text-align: center;}.main-panel-header { margin: 2px auto; padding: 2px; width: 100%; height: 32px; text-align: center;}.main-panel-left { float: left; margin: 2px auto; padding: 2px; width: 35%; height: auto; text-align: center;}.main-panel-right { float: left; margin: 2px auto; padding: 2px; width: 65%; height: auto; text-align: center;}.css-header { font-weight: bold; border: 1px solid; background-color: #aaa; color: red;}.css-left{ height: 96px; border: 1px solid; background-color: #ccc; color: red;}.css-right{ height: 96px; border: 1px solid; background-color: #eee; color: red;}import React from "react";import './css/page-struct.css';const infoMap = { pageInfo: '页面头部', underLeftInfo: '页面左下方', underRightInfo: '页面右下方'}function HeaderPanel(){ return ( <divName="css-header"> {infoMap.pageInfo} </div> );}function LeftPanel(){ return ( <divName="css-left"> {infoMap.underLeftInfo} </div> );}function RightPanel(){ return ( <divName="css-right"> {infoMap.underRightInfo} </div> );}function MainPanel(props){ return ( <divName="main-panel"> <divName="main-panel-header"> {props.header} </div> <divName="main-panel-left"> {props.left} </div> <divName="main-panel-right"> {props.right} </div> </div> );}function Page(){ return ( <MainPanel header={<HeaderPanel/>} left={<LeftPanel/>} right={<RightPanel/>}/> );}const PageStructExample = () => { return ( <span> <Page/> </span> );}export default PageStructExample;

效果：