精华内容
下载资源
问答
  • 左边固定右边自适应

    2019-04-01 21:49:04
    <!DOCTYPE html> <html> <head> ...meta charset="utf-8" />...meta name="viewport" content="width=device-width, initial-scale=1">...左边固定右边自适应</title> ...
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<title>左边固定右边自适应</title>
    		<style type="text/css">
    			*{
    				margin: 0;
    				padding: 0;
    			}
    			/* //第一:采用浮动元素,当然也得清浮动,左边浮动,
    			右边用margin-left,看见word-break:break-all了没,
    			是强制让内容换行,要不就跑远了。 */
    			/* .container{
    				overflow: auto;//清除浮动
    				zoom: 1;
    				background-color: #7FFFD4
    			}
    			.left{
    				float: left;
    				width: 200px;
    				height: 400px;
    				background-color: #5F9EA0;
    				word-break: break-all;
    			}
    			.right{
    				margin-left: 200px;
    				background-color: #FAEBD7;
    				height: 400px;
    				word-break: break-all;
    			} */
    			/* 第二种:用相对定位,左边用position:absolute,
    			右边用margin-left,其实跟浮动定位差不多 */
    			/* .container{
    				overflow: auto;
    				zoom: 1;
    				position: relative;
    			}
    			.left{
    				position: absolute;
    				width: 200px;
    				height: 400px;
    				background-color: #5F9EA0;
    				word-break: break-all;
    			}
    			.right{
    				height: 400px;
    				background-color: #FAEBD7;
    				margin-left: 200px;
    				word-break: break-all;
    			} */
    			
    			/* 第三种:左边和右边都用绝对定位 */
    			/* .container{
    				position: relative;
    			}
    			.left{
    				position: absolute;
    				left: 0;
    				top: 0;
    				width: 200px;
    				height: 400px;
    				background-color: #5F9EA0;
    				word-break: break-all;
    			}
    			.right{
    				position: absolute;
    				top: 0;
    				left: 200px;
    				width: 100%;
    				height: 400px;
    				background-color: #FAEBD7;
    				word-break: break-all;
    			} */
    			
    			/* 第四种:使用css3的flex盒模型来实现两栏布局 */
    			/* .container{
    				display: flex;
    				flex-direction: row;
    			}
    			.left{
    				width: 200px;
    				height: 400px;
    				background-color: #5F9EA0;
    				word-break: break-all;
    			}
    			.right{
    				flex: 1;//flex-grow:1;
    				height: 400px;
    				background-color: #FAEBD7;
    			} */
    			/* 第五种  BFC的区域不会与float box重叠。*/
    			.left{
    				float: left;
    				width: 200px;
    				height: 400px;
    				background-color: #5F9EA0;
    				word-break: break-all;
    			}
    			.right{
    				overflow: hidden;
    				height: 400px;
    				background-color: #FAEBD7;
    				word-break: break-all;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="container">
    			<div class="left"><p>2222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222</p></div>
    			<div class="right">right</div>
    		</div>
    	</body>
    </html>
    
    展开全文
  • 左边固定 右边自适应

    2015-11-28 20:59:13
    左边固定 右边自适应 1.第一种实现方式,左边给定宽高,左浮动,右边给定高度,margin-left:左边的宽度; 2.第二种实现方式 这两种方法网上都可以百度得到,在这里就不多说了,...

            左边固定 右边自适应


    1.第一种实现方式,左边给定宽高,左浮动,右边给定高度,margin-left:左边的宽度;



    2.第二种实现方式






    这两种方法网上都可以百度得到,在这里就不多说了,只是注意,右边的那个div可以不设置他的宽度,但是高度必须给定(div是空,如果你的div里面有文字那么就会自动撑高了),建议学前端的同学还是要自己上手敲一下。


    3.第三种实现方法




    4.介绍绝对定位的两种方法,页面布局为<div class="box1">ddd</div><div class="box2">ddd</div>

        i>

       .box1{ position: absolute;top:0 ; left:0 ;width:200px;background: #ff0;}       
       .box2{ position: absolute;
     top:0 ; left:200px; width: 100% ; right:0; background: #f0f;}
       

      ii> 

       .box1{ position: absolute; top:0; left:0; width:200px; background: #ff0;}
       .box2{ margin-left: 200px; background: #f0f;}




    展开全文
  • 1.float方式 代码: <!DOCTYPE html> <html lang="en"> <...meta name="viewport" content="width=device-width, initial-scale=1.0">...folat实现左边固定右边自适应</title> <style>

    1.float方式

    代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>folat实现左边固定右边自适应</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .warp{
                width: 100%;
                height: 100vh;
            }
            .left{
                width: 200px;
                height: 300px;
                background-color: aqua;
                float: left;
            }
            .warp::after{
                content: "";
                display: block;
                clear: both;
            }
            .right{
                /* margin-left: 200px; */
                height: 350px;
                background-color: red;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div class="warp">
            <div class="left"></div>
            <div class="right"></div>
        </div>
    </body>
    </html>
    

    右边区域需要设置overflow:hidden; 触发bfc(bfc:块级格式化上下文)
    最后记得清楚浮动
    在这里插入图片描述

    2.position方式

    代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>position实现左边固定右边自适应</title>
       <style>
           *{
               margin: 0;
               padding: 0;
           }
           .warp{
               width: 100%;
               height: 100vh;
               position: relative;
           }
           .left{
               width: 200px;
               height: 300px;
               background-color: red;
               position: absolute;
               top: 0;
               left: 0;
           }
           .right{
               margin-left: 200px;
               height: 350px;
               background-color: green;
           }
       </style>
    </head>
    <body>
       <div class="warp">
           <div class="left"></div>
           <div class="right"></div>
       </div>
    </body>
    </html>
    

    注意需要margin-left属性
    截图:
    在这里插入图片描述

    3.flex方式

    代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>flex实现左边固定右边自适应</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .warp{
                width: 100%;
                height: 100vh;
                position: relative;
                display: flex;
            }
            .left{
                width: 200px;
                height: 300px;
                background-color: aqua;
            }
            .right{
                flex: 1 1 auto;
                height: 350px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div class="warp">
            <div class="left"></div>
            <div class="right"></div>
        </div>
    </body>
    </html>
    

    截图:
    在这里插入图片描述

    4.table方式

    代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>table实现左边固定右边自适应</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .warp{
                width: 100%;
                position: relative;
               display: table;
            }
            .left{
                width: 200px;
                height: 200px;
                background-color: aqua;
                display: table-cell;
            }
            .right{
                display: table-cell;
                height: 350px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div class="warp">
            <div class="left"></div>
            <div class="right"></div>
        </div>
    </body>
    </html>
    

    div高度取决于最大高度height
    截图:
    在这里插入图片描述

    5.grid

    代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>grid实现左边固定右边自适应</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .warp{
                width: 100%;
                display: grid;
                grid-template-rows: 100px;
                grid-template-columns: 300px auto;
            }
            .left{
                background-color: aqua;
            }
            .right{
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div class="warp">
            <div class="left"></div>
            <div class="right"></div>
        </div>
    </body>
    </html>
    

    grid提供了 grid-template-rows和grid-template-columns:属性让我们设置行和列的宽、高
    截图:
    在这里插入图片描述

    展开全文
  • css布局——左边固定 右边自适应 效果 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &...

    css布局——左边固定 右边自适应

    效果

    在这里插入图片描述

    index.html

    <!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 class="big-box">
            <!-- <div class="bigIcon"></div> -->
            <div class="kindTitle">大类:</div>
            <div id="demo" class="kindText"><button>按钮一</button><button>按钮一</button><button>按钮一</button><button>按钮一</button><button>按钮一</button><button>按钮一</button><button>按钮一</button><button>按钮一</button><button>按钮一</button><button>按钮一</button>  </div>
        </div>
        <style>
            .big-box{
                width:100%;
                margin-top:50px;
            }
            .bigIcon{
                width:16px;
                height:16px;
                background: #3077E8;
                border-radius:50%;
                margin-top: 4px;
                float: left;
            }
           /* 加float */
            .kindTitle{
                width:60px;
                margin-left: 20px;
                /* float: right; */
                float: left;
              
    
            }
            button{
                display: inline-block;
                margin: 5px 5px;
                width: 230px;
            }
          /* 不要加float,就会随着浏览器大小宽度自适应改变 */
            .kindText{
                margin-left: 100px; 
                /* margin-right: 100px;  */
    
                /* white-space: nowrap;
                overflow:hidden; */
            }
            .abc{
                display: none;
            }
        </style>
        <script>
               var div = document.getElementById('demo');
                // console.log(div.offsetHeight); // 224
                console.log(div.clientHeight); // 220
          
        </script>
    </body>
    </html>
    
    展开全文
  • 自适应布局在现在的布局中,很容易遇见,下面是在平时工作中对左边固定右边自适应及左边自适应,右边固定布局的几种方法的一些总结,希望能帮到大家,如果大家有更多更好的意见,欢迎补充! 页面布局如下...
  • 左边固定右边自适应 ** 效果图如下: html布局代码如下: <div class="left"></div> <div class="main"></div> 样式如下: 方法一:浮动法 .left{ width: 200px; height: 400px; ...
  • <!DOCTYPE html><...  <head>  <meta charset="UTF-8">  <...左边固定右边自适应</title>  <style type="text/css">  .out{  width: 90%;  ...
  • 零基础学前端 两列布局左边固定右边自适应 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> ...
  • 一看也没什么特别之处,就是左边固定右边自适应,就这么简单。原理:通过设置一个margin-left;或者margin-right就可以搞定。方法有很多,这次就只介绍这种设置margin的。Documentbody{margin:0;padding:0;}#wrap {...
  • 实现这样一个两列布局:左边宽度固定(200px),右边自适应。 <div class = "block"> <div class = "left">固定宽度</div> <div class = "right">自适应</div> </div> ...
  • 思路说一下:左边固定右边自适应 原理就是左边浮动 右边的文字无法进去左边的区域 左边浮动区域就是右边文字超出的部分 overflow:hidden;就可以隐藏左边的部分 裁切掉左边部分 <!DOCTYPE html> <...
  • 左边固定右边自适应布局</title> </head> <style type="text/css"> /* 浮动实现 */ .left{ width: 200px; height: 500px; float:left; background: lightgreen; } .right { height: 500px; background: red; } /* ...
  • 常见的左边固定右边自适应的布局方式 <div class="parent"> <div class="left">我是左边固定</div> <div class="right">我是右边自适应</div> </div> 1、左边向左浮动并...
  • 一看也没什么特别之处,就是左边固定右边自适应,就这么简单。 原理:通过设置一个margin-left;或者margin-right就可以搞定。方法有很多,这次就只介绍这种设置margin的。 代码: <!doctype...
  • 上一篇文章中有提及过很多web前端开发者用float+margin+position:absolute来实现表单内容的左边文字固定右边的输入框自适应宽度的问题,当然,这个问题我也在百度中搜索过,基本搜索出来的答案都是这样描述的,我也...
  • 左边固定右边自适应 /* 定位+margin-left */ /* .box1 { float: left; width: 300px; height: 150px; background: red; } .box2 { margin-left: 300px; background: blue; height: 150px; } ...
  • css 布局小技巧 左边固定右边自适应

    千次阅读 2016-09-13 19:15:33
    在页面布局或者是列表布局中,我们经常出现一个场景:左边固定宽度的盒子,右边自适应: div class="product_open"> label class="label">Open Product:label>//这一列是固定宽度 ul class="check_game">//这...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,757
精华内容 4,302
关键字:

左边固定右边自适应