zoukankan      html  css  js  c++  java
  • 二列布局_左右固定_自己撑开父级块

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>二列布局_左右固定_自己撑开父级块</title>
    		<style type="text/css">
    			.container{
    				 960px;
    				margin: 0 auto;
    				background-color: yellow;
    				overflow: hidden;
    			}
    			.clear{
    				-ms-zoom: 1;
    			}
    			.clear:after{
    				content:'';
    				display: block;
    				clear: both;
    			}
    			.left{
    				 200px;
    				height: 600px;
    				background-color: #4169E1;
    				float: left;
    			}
    			.right{
    				 750px;
    				height: 600px;
    				background-color: darkcyan;
    				float: right;
    			}
    		</style>
    	</head>
    	<body>
    		<h2>基本思路</h2>
    		<ol>
    			<li>要给左右2列添加一个父集区块</li>
    			<li>要给左右2个区块设置一个浮动:left/right</li>
    			<li>给父区块添加一个after伪类让子块撑开父集</li>
    		</ol>
    		<!-- DOM -->
    		<div class="container clear">
    			<div class="left">左侧</div>
    			<div class="right">右侧</div>
    		</div>
    	</body>
    </html>
  • 相关阅读:
    python 之Twsited
    python之 rabbitmq
    python 之redis
    异常处理
    python select
    线程与进程
    初识socket
    Position属性
    Http协议理解
    BFC(块级格式化上下文)
  • 原文地址:https://www.cnblogs.com/webaction/p/14873369.html
Copyright © 2011-2022 走看看