zoukankan      html  css  js  c++  java
  • 三列布局_左右绝对定位_中间适应

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>三列布局_左右绝对定位_中间适应</title>
    		<style type="text/css">
    			.container{
    				position: absolute;
    				left: 0;
    				right: 0;
    			}
    			.left{
    				top: 0;
    				left: 0;
    				position: absolute;
    				 200px;
    				height: 600px;
    				background-color: aqua;
    			}
    			.right{
    				top: 0;
    				right: 0;
    				position: absolute;
    				 200px;
    				height: 600px;
    				background-color: yellowgreen;
    			}
    			.main{
    				margin-left: 200px;
    				margin-right: 200px;
    				height: 600px;
    				background-color: papayawhip;
    			}
    		</style>
    	</head>
    	<body>
    		<h2>基本思路</h2>
    		<ol>
    			<li>左右2列采用绝对定位来布局</li>
    			<li>中间内容部分采用margin挤压出来</li>
    		</ol>
    		<!-- DOM -->
    		<div class="container">
    			<div class="left">左侧</div>
    			<div class="right">右侧</div>
    			<div class="main">主体</div>
    		</div>
    	</body>
    </html>
  • 相关阅读:
    JS基础语法
    JS的初步了解
    CSS初步学习
    HTML标签
    初步了解HTML
    LEGB规则
    Python面试题练习
    闭包
    Caché,Cache数据库连接并查询数据
    Caché,Cache数据库下载
  • 原文地址:https://www.cnblogs.com/webaction/p/14873398.html
Copyright © 2011-2022 走看看