zoukankan      html  css  js  c++  java
  • CSS 左右固定,中间自适应宽度 及 左右自适应宽度,中间固定

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>左右固定,中间自适应</title>
    <style>
    html ,
    body ,
    div{
        margin:0;
        padding:0;
    }
    .left ,
    .right {
        float: left;
        300px;
        height:300px;
        background:orange;
    }
    .right{
        float: right;
    }
    .center{
        height:300px;
        background:red;
    }
    </style>
    </head>
    <body>
         
        <div class="left">左边</div>
        <div class="right">右边</div>
        <div class="center">中间</div>
    </body>
    </html>
    

      

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>左右自适应,中间固定</title>
    <style>
    html , 
    body , 
    div{
    	margin:0;
    	padding:0;
    }
    .left,
    .right {
    	float: left;
    	margin: 0 0 0 -300px;
    	 50%;
    }
    
    .main {
    	 600px;
    	float: left;
    	background: green;
    }
    	
    .inner {
    	padding: 20px;
    }
    	
    .left .inner,
    .right .inner {
    	margin: 0 0 0 300px;
    	background: orange;
    }
    .left,
    .right {
    	float: left;
    	margin: 0 0 0 -300px;
    	 50%;
    	* 49.9%;
    }
    </style>
    </head>
    <body>
    	
    	<div class="left">
    		<div class="inner">左边</div>
    	</div>
    	<div class="main">
    		<div class="inner">中间</div>
    	</div>
    	<div class="right">
    		<div class="inner">右边</div>
    	</div>
    
    </body>
    </html>
    

      

  • 相关阅读:
    戴德金分割第6页
    自己总结的学习方法
    自己总结的选股方法和建仓方法
    自编通达信公式集合
    电脑目录设置
    1·0天内跳空缺口的公式
    springsecurity
    java开发 日志框架选择
    javaFramwork title
    idea git忽略文件
  • 原文地址:https://www.cnblogs.com/zion0707/p/4480677.html
Copyright © 2011-2022 走看看