必须居中... footer放在之后”。 为了兼容性，我将使用CSS将footer固定在底部，并在HTML结构中将其置于body之后（虽然浏览器会自动修正，但我会尽量符合文本描述）。 实际上，最稳妥的方式是使用position: fixed，这样即使它在body外，也能显示在底部。 / footer { position: fixed; bottom: 0; left: 0; width: 100%; height: 80px; background-color: #5a4a42; color: #fff; display: flex; justify-content: center; align-items: center; font-size: 14px; z-index: 9999; border-top: 3px solid #c0392b; } body { padding-bottom: 100px; } .section-icon { color: #c0392b; margin-right: 10px; } /* === 自动布局修复 === */ .content-wrap, .article-content, .main-content, .container, .wrapper, .content, .article, .main, div[class*="content"]:not([class*="carousel"]), div[class*="article"]:not([class*="carousel"]), div[class*="main"]:not([class*="carousel"]), div[class*="wrapper"]:not([class*="carousel"]), div[class*="container"]:not([class*="carousel"]), section, article { max-width: 1200px !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; float: none !important; } img:not([data-carousel-img]), video, iframe, embed, table, pre { max-width: 100% !important; height: auto; } footer, [class*="footer"], [id*="footer"] { width: 100% !important; max-height: 150px !important; text-align: center !important; display: flex !important; align-items: center !important; justify-content: center !important; } footer *, [class*="footer"] *, [id*="footer"] * { text-align: center !important; } /* === 标题字号最大限制 === */ h1 { font-size: 1.8rem !important; } h2, h3, h4, h5, h6, h7, h8, h9 { font-size: 1.4rem !important; } /* === 时间轴自动修正：统一改为单侧竖线（内容左对齐，左间距仅10px避免溢出） === */ .timeline, .timeline-container, .timeline-item { box-sizing: border-box !important; } .timeline { position: relative !important; max-width: none !important; width: 100% !important; padding: 0 0 0 10px !important; margin: 24px 0 !important; overflow: visible !important; } .timeline::before, .timeline::after { content: "" !important; position: absolute !important; top: 0 !important; bottom: 0 !important; left: 0 !important; margin-left: 0 !important; width: 2px !important; height: auto !important; transform: none !important; background: currentColor !important; opacity: .25 !important; border-radius: 0 !important; } .timeline-item, .timeline-item:nth-child(odd), .timeline-item:nth-child(even), .timeline-item:nth-of-type(odd), .timeline-item:nth-of-type(even), .timeline-container, .timeline-container.left, .timeline-container.right { position: relative !important; width: auto !important; max-width: none !important; left: auto !important; right: auto !important; top: auto !important; float: none !important; margin: 0 0 24px !important; padding: 0 0 0 14px !important; text-align: left !important; transform: none !important; background-color: transparent !important; display: block !important; vertical-align: baseline !important; } .timeline-content { width: auto !important; max-width: none !important; padding: 16px !important; text-align: left !important; } .timeline-item::before, .timeline-item::after, .timeline-container::before, .timeline-container::after { content: "" !important; position: absolute !important; top: 6px !important; bottom: auto !important; left: -2px !important; right: auto !important; width: 10px !important; height: 10px !important; margin: 0 !important; border-radius: 50% !important; transform: none !important; background: currentColor !important; border: 2px solid #fff !important; opacity: 1 !important; z-index: 2 !important; box-shadow: none !important; }

搭桥专家张勇简介百度