首页 > 代码库 > 三列自适应布局（左右定宽 中间自适应）
三列自适应布局（左右定宽 中间自适应）
左右定中间自适应三列布局
1.绝对定位 2.浮动 3.flex
1 1.绝对定位 2 <!doctype html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>三栏布局</title> 6 <style type="text/css"> 7 * { 8 margin: 0; 9 padding: 0;10 }11 12 #main {13 margin: 0 300px;14 height: 200px;15 background: #00b7ef;16 }17 18 #left,19 #right {20 width: 300px;21 height: 200px;22 }23 24 #left {25 position: absolute;26 top: 0;27 left: 0;28 background: #8fc41f;29 }30 31 #right {32 position: absolute;33 top: 0;34 right: 0;35 background: #fffaba;36 }37 </style>38 </head>39 40 <body>41 <!-- 位置是left main right 位置可互换-->42 <div id="left">43 </div>44 <div id="right">45 </div>46 <div id="main">47 </div>48 </body>49 50 </html>
1 2.浮动 2 <!DOCTYPE html> 3 <html lang="en"> 4 5 <head> 6 <meta charset="utf-8" /> 7 <title> 三列左右固定宽度中间自适应</title> 8 <style> 9 body {10 margin: 0;11 padding: 0;12 }13 14 #left {15 background-color: #E8F5FE;16 height: 400px;17 width: 100px;18 float: left;19 }20 21 #center {22 background-color: #F2FDDB;23 height: 400px;24 margin-right: 100px;25 margin-left: 100px;26 }27 28 #right {29 background-color: #FFE7F4;30 height: 400px;31 width: 100px;32 float: right;33 }34 </style>35 </head>36 37 <body>38 <!-- 必须是左右中三列顺序 如果是float-->39 <div id="left">左列</div>40 <div id="right">右列</div>41 <div id="center">中列</div>42 </body>43 44 </html>
1 3. flex 2 <!DOCTYPE html> 3 <html lang="en"> 4 5 <head> 6 <meta charset="UTF-8"> 7 <title>Document</title> 8 <style type="text/css"> 9 * {10 margin: 0;11 padding: 0;12 }13 14 .three-coloum {15 display: flex;16 display: -webkit-flex;17 width: 100%;18 height: 500px;19 }20 21 .left {22 background-color: red;23 width: 200px;24 /*height: 100px;*/25 }26 27 .right {28 background: blue;29 width: 200px;30 /*height: 100px;*/31 }32 33 .main {34 background: yellow;35 flex: 1;36 -webkit-box-flex: 1;37 -moz-box-flex: 1;38 }39 </style>40 </head>41 42 <body>43 <div class="three-coloum">44 <div class="left">左</div>45 <div class="main">中间</div>46 <div class="right">右</div>47 </div>48 </body>49 50 </html>
三列自适应布局（左右定宽 中间自适应）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。