html两栏布局问题

 

1.利用float+margin实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body> <div id="left">左列定宽</div> <div id="right">右列自适应</div> </body> 
<style>
    #left { background-color: #f00; float: left; width: 100px; height: 500px; }
    #right { background-color: #0f0; height: 500px; margin-left: 100px; /*大于等于#left的宽度*/ }
</style>
</html>

 

2.使用float+overflow实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body> <div id="left">左列定宽</div> <div id="right">右列自适应</div> </body> 
<style>
    #left { background-color: #f00; float: left; width: 100px; height: 500px; }
    #right { background-color: #0f0; height: 500px;overflow: hidden; /*触发bfc达到自适应*/}
</style>
</html>

 

4.使用绝对定位实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<div id="parent"> <div id="left">左列定宽</div> <div id="right">右列自适应</div> </div>
<style>
    #parent{ position: relative; /*子绝父相*/ }#left { position: absolute; top: 0; left: 0; background-color: #f00; width: 100px; height: 500px; }#right { position: absolute; top: 0; left: 100px; /*值大于等于#left的宽度*/ right: 0; background-color: #0f0; height: 500px; }
</style>
</html>
5.使用flex实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body> <div id="parent"> <div id="left">左列定宽</div> <div id="right">右列自适应</div> </div> </body> 
<style>
    #parent{ width: 100%; height: 500px; display: flex; }
    #left { width: 100px; background-color: #f00; }
    #right { flex: 1; /*均分了父元素剩余空间*/ background-color: #0f0; }

</style>
</html>

 

 

左边自适应，右边定宽
<body> <div id="parent"> <div id="right">右列定宽</div> <div id="left">左列自适应</div> <!--顺序要换一下，不然left会独占一行--> </div> </body> #left { overflow: hidden; /*触发bfc*/ height: 500px; background-color: #f00; }#right { float: right; width: 100px; height: 500px; background-color: #0f0; }
3.使用绝对定位实现
 
<body> <div id="parent"> <div id="left">左列自适应</div> <div id="right">右列定宽</div> </div> </body> #parent{ position: relative; /*子绝父相*/ }#left { position: absolute; top: 0; left: 0; right: 100px; /*大于等于#rigth的宽度*/ background-color: #f00; height: 500px; }#right { position: absolute; top: 0; right: 0; background-color: #0f0; width: 100px; height: 500px; }
4.flex实现
<body> <div id="parent"> <div id="left">左列自适应</div> <div id="right">右列定宽</div> </div> </body> #parent{ height: 500px; display: flex; }#left { flex: 1; background-color: #f00; }#right { width: 100px; background-color: #0f0; }

 

 

posted @ 2023-01-31 16:17  Shimily  阅读(41)  评论(0)    收藏  举报