首页 > 代码库 > 布局-三列布局（定宽+自适应+定宽）
布局-三列布局（定宽+自适应+定宽）
两侧定宽中间自适应
方案一：float+margin+(fix)
结构：
1 <div class="parent"> 2 <div class="left"><p>left</p></div> 3 <div class="center-fix"> 4 <div class="center"> 5 <p>center</p> 6 <p>center</p> 7 </div> 8 </div> 9 <div class="right"><p>right</p></div>10 </div>
样式：
1 p {margin:0;} 2 .parent { 3 background-color: grey; 4 width: 600px; 5 6 overflow: hidden; 7 } 8 .right,.left { 9 position: relative;10 float: left;11 width: 100px;12 }13 .center-fix {14 float: left;15 width: 100%;16 margin: 0 -100px;17 }18 .center {19 margin: 0 110px;20 background-color: greenyellow;21 }22 .right {23 background-color: skyblue;24 }25 .left {26 background-color: indianred;27 }
方案二：inline-block + margin + (fix)
结构：
1 <div class="parent"> 2 <div class="left"><p>left</p></div> 3 <div class="center-fix"> 4 <div class="center"> 5 <p>center</p> 6 <p>center</p> 7 </div> 8 </div> 9 <div class="right"><p>right</p></div>10 </div>
样式：
1 p {margin:0;} 2 .parent { 3 background-color: grey; 4 width: 600px; 5 font-size: 0;/*去掉inline-block元素之间天然的空隙*/ 6 } 7 .right,.left,.center-fix { 8 display: inline-block; 9 font-size: 16px;10 vertical-align: top;/*文本定位在顶部*/11 }12 .right,.left {13 width: 100px;14 position: relative;15 }16 .center-fix {17 width: 100%;18 margin: 0 -100px;19 }20 .center {21 margin: 0 110px;22 background-color: greenyellow;23 }24 .right {25 background-color: skyblue;26 }27 .left {28 background-color: indianred;29 }
方案三：table + table-cell
结构：
1 <div class="parent">2 <div class="left"><p>left</p></div>3 <div class="center">4 <p>center</p>5 <p>center</p>6 </div>7 <div class="right"><p>right</p></div>8 </div>
样式：
1 p {margin:0;} 2 .parent { 3 background-color: grey; 4 width: 600px; 5 6 display: table; 7 table-layout: fixed; 8 } 9 .right,.left {10 width: 100px;11 display: table-cell;12 }13 .center {14 display: table-cell;/*没有margin属性*/15 border-left: 10px solid transparent;16 border-right: 10px solid transparent;17 background-origin: padding-box;/*指定背景图片从哪个区域绘制*/18 background-clip: padding-box;/*背景图片显示的区域定位*/19 20 background-color: greenyellow;21 }22 .right {23 background-color: skyblue;24 }25 .left {26 background-color: indianred;27 }
方案四：absolute
结构：
1 <div class="parent">2 <div class="left"><p>left</p></div>3 <div class="center">4 <p>center</p>5 <p>center</p>6 </div>7 <div class="right"><p>right</p></div>8 </div>
样式：
1 p {margin:0;} 2 .parent { 3 background-color: grey; 4 width: 600px; 5 height: 36px;/*position:absolute的元素是脱离文档流的*/ 6 7 position: relative; 8 } 9 .right,.left,.center {10 position: absolute;11 }12 .center {13 left: 110px;14 right: 110px;15 background-color: greenyellow;16 }17 .right {18 right: 0;19 width: 100px;20 background-color: skyblue;21 }22 .left {23 left: 0;24 width: 100px;25 background-color: indianred;26 }
解决方案五：flex
结构：
1 <div class="parent">2 <div class="left"><p>left</p></div>3 <div class="center">4 <p>center</p>5 <p>center</p>6 </div>7 <div class="right"><p>right</p></div>8 </div>
样式：
1 p {margin:0;} 2 .parent { 3 background-color: grey; 4 width: 600px; 5 6 display: flex; 7 } 8 .right,.left { 9 width: 100px;10 }11 .center {12 flex: 1;/*center获得所有的剩余部分*/13 margin: 0 10px;14 background-color: greenyellow;15 }16 .right {17 background-color: skyblue;18 }19 .left {20 background-color: indianred;21 }
布局-三列布局（定宽+自适应+定宽）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。