常用的两栏三栏布局

最新推荐文章于 2023-05-14 09:05:56 发布

chuntianni1600

最新推荐文章于 2023-05-14 09:05:56 发布

阅读量166

点赞数

原文链接：https://my.oschina.net/u/2958786/blog/1541347

版权

两栏布局左边定宽右边自适应

  <!DOCTYPE html>
  <html>
  <head>
  	<title></title>
  	<meta charset="utf-8">
  	<style type="text/css">
  		.left{
             width:200px;
             height:500px;
             float:left;
             background:red;
  		}
  		.right{
  			overflow:hidden;
              height:500px;
              background:#ff0;
  		}
  	</style>
  </head>
  <body>
    <div class="left">fdgd</div>
    <div class="right">dgsdfg</div>
  </body>
  </html>

三栏布局左右定宽中间自适应

    <!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<meta charset="utf-8">
    	<style type="text/css">
    	    div{
    	       height:500px;	
    	    }
    		.left{
               width:200px;
               float:left;
               background:red;
               margin-left:-200px;
    		}
    		.parent{
    		  padding-left:200px;
    		  padding-right:200px;
    		  background:green;
    		}
    		.right{
               width:200px;
               float:right;
               background:#ff0;
               margin-right:-200px;
    		}
    	</style>
    </head>
    <body>
    <div class="parent">中间
      <div class="left">左边</div>
      <div class="right">右边</div>
    </div>  
    </body>
    </html>

转载于:https://my.oschina.net/u/2958786/blog/1541347