.layout { display: flex; justify-content: center; align-items: center; } body { margin: 0 15px 15px 15px; } #main-box { width: 100%; padding: 0 1% 0 1%; box-sizing: border-box; background-color: #fff; border-radius: 5px; } .title { width: 100%; height: 30px; justify-content: start; box-sizing: border-box; } .title p { font-size: 14px !important; font-weight: bold; } #plan-detail-box { width: 100%; height: 80px; align-items: center; justify-content: space-between; } #plan-detail-box>p, #plan-basic-box>p, #oper-record-box p, #implement-box p { font-size: 20px; font-weight: bold; } #plan-basic-box { width: 100%; flex-direction: column; align-items: baseline; justify-content: space-evenly; } .classTable { width: 100%; table-layout: fixed; text-align: center; border-collapse: collapse; border-spacing: 1px; box-sizing: border-box; } .classTable tr td, .classTable tr th { height: 50px; box-sizing: border-box; border: 1px solid #ddd; padding: 10px 20px; text-align: left; } .classTable tr td, .classTable tr th { width: 20% } .classTable tr td:nth-child(1), .classTable tr th:nth-child(1) { width: 40% } .classTable tr:nth-child(odd) { background-color: #f2f2f2; } #baseTable tr td, #baseTable tr th{ text-align: center; } #implement-box { width: 100%; flex-direction: column; align-items: baseline; justify-content: space-evenly; } #oper-record-box { width: 100%; flex-direction: column; align-items: baseline; justify-content: space-evenly; } .layui-timeline { margin-top: 10px; width: 100%; } .oper-info { height: 80px; } .oper-info>div:nth-child(1) { width: 7%; height: 100% } .oper-info>div:nth-child(2) { width: 73%; height: 100% } .oper-info>div:nth-child(3) { width: 20%; height: 100% } .user-oper { flex-direction: column; } .page-content { width: 100%; }