<style> .box { /* 添加BFC 防止下方元素飞到上方 */ overflow:hidden; } .left { float:left; width: 200px; background-color:gray; height:400px;}.right { /* maring-left 值就是左侧栏的宽度 */ margin-left:200px; background-color:lightgray; height: 200px;}</style><div class="box"> <div class="left">左边</div> <div class="right">右边</div> </div>
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { display: flex; } .left { width: 200px; background-color:gray; height:400px; } .right { /* maring-left 值就是左侧栏的宽度 */ flex: 1; background-color:lightgray; height: 200px; } </style></head><body> <div class="box"> <div class="left">左边</div> <div class="right">右边</div> </div></body></html><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { background: #eee; overflow: hidden; padding: 20px; height: 200px; } .left { width: 200px; background-color:gray; height:200px; float: left; } .right { width: 120px; background-color:lightgray; height: 200px; float: right; } .middle{ margin-left: 220px; height: 200px; background: lightpink; margin-right: 140px; } </style></head><body> <div class="box"> <div class="left">左边 <div>121121</div> </div> <div class="right">右边 <div>edeeded</div> </div> <div class="middle">中间</div> </div></body></html>两边固定宽度，中间宽度自适应； 利用中间元素的margin值控制两边的间距 宽度小于左右宽度之和时，右侧就被挤下去 手机屏幕时，中间宽度不够；实际场景内容会乱
主题内容时最后加载的 右边在主题内容之前，如果是响应式设计，不能简单的换行展示
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { background: #c94242; position: relative; } .left, .right, .middle{ height: 200px; line-height: 200px; text-align: center; } .left { position: absolute; top: 0; left: 0; width:100px; background-color: rgb(177, 253, 177); } .right { position: absolute; top: 0; right: 0; width:100px; background-color: rgb(188, 228, 188); } .middle{ margin: 0 110px; background: rgb(210, 161, 192); color: white; } </style></head><body> <div class="box"> <div class="left">左边 </div> <div class="right">右边 </div> <div class="middle">中间自适应</div> </div></body></html>左右两边使用绝对定位，固定在两侧 中间占满一行，但通过margin和左右两边留出10px的间隔；
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { height: 200px; line-height: 200px; background: #c94242; display: table; table-layout: fixed; text-align: center; width: 100%; border-collapse: collapse; /* 合并边框 */ } .left, .right, .middle { display: table-cell; border: 1px solid #000; /* 添加边框 */ } .right, .left { width: 100px; background-color: rgb(188, 228, 188); } .middle { width: 100%; background: rgb(210, 161, 192); color: white; } </style></head><body> <div class="box"> <div class="left">左边固定宽度</div> <div class="middle">中间自适应</div> <div class="right">右边固定宽度</div> </div></body></html>display: table 和 table-layout: fixed：
给 .box 元素设置 display: table，使其表现得像一个表格。table- layout: fixed 则指定表格采用固定布局算法，表格列的宽度由 width 属性决定，而不是内容的宽度。
display: table-cell：
.left、.right 和 .middle 元素都设置了 display: table-cell，这使得它们表现得像表格的单元格。
宽度设置：
.left 和 .right 元素的宽度都被设置为 100px，这意味着它们会固定占用 100px 的宽度。
.middle 元素的宽度设置为 100%，在表格布局中，它会自动填充剩余的空间，从而实现自适应宽度。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { display: flex; justify-content: space-around; } .left, .right, .middle { height: 100px; } .left { width: 100px; background-color: rgb(188, 228, 188); } .right { width: 120px; background: lightblue; } .middle { width: 100%; background: rgb(210, 161, 192); color: white; margin: 0 20px; } </style></head><body> <div class="box"> <div class="left">左边固定宽度</div> <div class="middle">中间自适应</div> <div class="right">右边固定宽度</div> </div></body></html>仅需将容器设置为display：flex； 盒内元素两端对齐，将中间元素设置为100%宽度，或者为flex：1，即可填充空白 盒内元素高度撑开容器的高度
代码结构简单 可以结合flex的其他功能实现更多效果，例如使用order属性调整显示顺序，让主体内容优先加载，但展示在中间，代码如下
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { display: flex; /* 这里可以根据实际情况调整 justify-content 属性，space-around 会在元素周围分配空间 */ justify-content: space-between; } .left, .right, .middle { height: 100px; } .left { width: 100px; background-color: rgb(188, 228, 188); /* 设置 left 元素的 order 为 1，使其显示在 middle 元素之后 */ order: 1; } .right { width: 120px; background: lightblue; /* 设置 right 元素的 order 为 2，使其显示在 left 元素之后 */ order: 2; } .middle { width: 100%; background: rgb(210, 161, 192); color: white; margin: 0 20px; /* 设置 middle 元素的 order 为 0，使其优先加载并显示在中间 */ order: 0; } </style></head><body> <div class="box"> <!-- HTML 结构中 middle 元素在中间，但通过 order 属性调整显示顺序 --> <div class="left">左边固定宽度</div> <div class="middle">中间自适应</div> <div class="right">右边固定宽度</div> </div></body></html><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { display: grid; width: 100%; grid-template-columns: 300px auto 300px; } .left, .right, .middle { height: 100px; } .left { background: coral; } .right { background: lightblue; } .middle { background: rgb(210, 161, 192); } </style></head><body> <div class="box"> <div class="left">左边固定宽度</div> <div class="middle">中间自适应</div> <div class="right">右边固定宽度</div> </div></body></html>display: grid;：将 .box 元素设置为一个 Grid 容器，使其子元素可以使用 Grid 布局。
width: 100%;：设置容器的宽度为其父元素宽度的 100%。
grid-template-columns: 300px auto 300px;：定义网格的列布局。这里将网格分为三列，第一列和第三列的宽度固定为 300px，中间列的宽度使用 auto，表示会根据可用空间自动调整，实现自适应。
优网科技，优秀企业首选的互联网供应服务商
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。
公安局备案号：
专属顾问
