一、两列布局:
方法一:采用position:absollute;并设置margin-left的值。
#left{ position:absolute; width:300px; top:0px; left:0px; background:#F00; } #right{ background:#0FC; margin-left:300px; } <div id="left">左边定宽</div> <div id="right">右边自适应</div>
方法二:采用float;并设置overflow:auto;(隐藏溢出的内容)
#left { float: left; width: 300px; background-color: blue; } #right { overflow: auto; background-color: red; } <div id="left">左边自适应</div> <div id="right">右边定宽</div>
方法三:使用flex布局的写法
.content{ display:flex; } .aside.left{ border:5px solid black; width:200px; } .aside.main{ flex-grow:1; border:5px solid red; } .aside { height:600px; } <div class="content"> <div class="aside left"></div> <div class="aside main"></div> </div>
二、三列布局
方法一:与两列布局类似,左右两边设置position:absolute;和top:0;left:0;right:0;
中间设置margin-left和margin-right即可.
*{ padding:0px; margin:0px; } #left,#right{ position:absolute; width: 300px; top:0; background-color: #0FC; } #left{ left:0; } #right{ right:0; } #main{ margin:0 300px; background-color:#999; } <div id="left">左边定宽</div> <div id="main">中间自适应</div> <div id="right">右边定宽</div>
方法二:左右采用float,中间设置 overflow:auto;和margin:0 300px;
*{ padding:0px; margin:0px; } #left,#right{ float:left; width: 300px; background-color: #0FC; } #right{ overflow:auto; float:right; } #main{ margin:0 300px; background-color:#999; } <div id="left">左边定宽</div> <div id="right">右边定宽</div> <div id="main">中间自适应</div>
方法三:使用flex布局的写法
.content{ display:flex; } .aside.left{ order:1; border:5px solid black; width:200px; } .aside.left{ order:3; border:5px solid black; width:200px; } .aside.main{ order:2; flex-grow:1; border:5px solid red; } .aside { height:600px; } <div class="content"> <div class="aside left"></div> <div class="aside right"></div> <div class="aside main"></div> </div>
原文地址:https://www.cnblogs.com/hongchenzimo/p/11026429.html
时间: 2024-10-11 16:13:04