左边定宽右边自适应

朴灿烈づ我的快乐病毒、 2023-07-20 05:49 16阅读 0赞

# 分析 #

**左侧**：利用浮动\*\*（float：left）**或绝对定位**(position:absolute)\*\*，使左侧的块元素脱离常规文档流,可以与右边块元素并列

【块级元素，默认自动填充父元素宽度，霸占一行】  
// 当前：右侧块元素宽度=父元素宽度

**右侧**可以设置：

*  width: 100%;（方法一）
 *  margin-left: 100px;（方法二）
 *  overflow: hidden;（方法三）
    
    **以下（float：left）代码都以（float：left）为例来书写，position:absolute是可以替换float：left的**
 *  方法四： flex布局

父容器设置 display：flex；Right部分设置 flex：1

*  方法五： flex布局  
    对父容器设置 display：flex；left的宽度设置30%，Right部分宽度设置70%

# 方法一：左边设置左浮动，右边宽度设置100% #

.left{ 
          float: left;
    	}
    .right{ 			
    	  width: 100%;
    	}

# 方法二：左边使用float: left;右边使用margin-left #

<!DOCTYPE html>
    <html lang="zh-cn">
    <head>
    	<meta charset="utf-8">
    	<title></title>
    	<style>
        	/*body, html{padding:0; margin:0;}*/
    	   /* // 根据CSS定位，利用浮动或绝对定位，使左侧的块元素脱离常规文档流,可以与右边块元素并列*/
    	    .left{ 
    	        float: left;           /*//利用浮动*/
    	        width: 400px;
    	        height: 200px;
    	        background: red;
    	    }
    	  /* // 【块级元素，默认自动填充父元素宽度，霸占一行】 // 当前：右侧块元素宽度=父元素宽度*/
    	  	.right{ 
    	        /*// 设置margin-left为左侧块元素的宽度。*/
    	        margin-left: 100px;
    	        /*// 现在：右侧块元素的宽度=父元素宽度-margin-left*/
    	        height: 200px;
    	        background: blue;
    	    }
    	</style>
    <head>
    <body>
        <div class="left">div1</div>
        <div class="right">div2</div>
    </body>
    </html>

# 方法三：左边使用float: left;右边使用overflow: hidden;触发BFC #

<!DOCTYPE html>
    <html lang="zh-cn">
    <head>
    	<meta charset="utf-8">
    	<title></title>
    	<style>
        	body, html{ padding:0; margin:0;}
    	    /*// 根据CSS定位，利用浮动或绝对定位，使左侧的块元素脱离常规文档流*/
    	    .left{ 
    	        float: left;           /*//利用浮动*/
    	        width: 300px;
    	        height: 200px;
    	        background: red;
    	    }
    	    /*// FC是普通（常规）文档流，格式化上下文，是页面中的一块渲染区域，有一套渲染规格。BFC是块级格式化上下文。 // 利用BFC块级格式化上下文,建立一个隔离的独立容器*/
    	    .right{ 
    	       /* // 改变overflow的值不为visible，触发BFC*/
    	        overflow: hidden;
    	        height: 220px;
    	        background: blue;
    	    }
    	</style>
    <head>
    <body>
        <div class="left">div1</div>
        <div class="right">div2</div>
    </body>
    </html>

# 方法四： 父容器设置 display：flex；Right部分设置 flex：1 #

对父元素设置为弹性盒子（flex布局），其子元素可以通过设置 flex 的数值来控制所占空间的比例。

body{ 
    			display: flex;
    		}
    		
    .right{ 
    			flex: 1;
    			//这里设置0.5的话就是占右边宽度的一半
    		}

# 方法四： 父容器设置 display：flex；Right部分设置 flex：1 #

body{ 
    			display: flex;
    		}
    .left{ 
    			width:30%;
    			
    		}		
    .right{ 
    			width:70%;
    			
    		}