zoukankan      html  css  js  c++  java
  • 三列等高布局

    三列等高布局的实现方法和两列等高布局的实现方法基本相同

        <div class="box clearfix">
    		<div class="container3">
    			<div class="container2">
    				<div class="container1">
    					<div class="col1">
    						<p>col1col1col1col1</p>
    						<p>col1col1col1col1</p>
    						<p>col1col1col1col1</p>
    					</div>
    					<div class="col2">
    						<p>col2 col2 col2 col2 col2 </p>
    						<p>col2 col2 col2 col2 col2 </p>
    						<p>col2 col2 col2 col2 col2 </p>
    					</div>
    					<div class="col3">
    						<p>col3 col3 col3 col3 col3 col3</p>
    						<p>col3 col3 col3 col3 col3 col3</p>
    						<p>col3 col3 col3 col3 col3 col3</p>
    						<p>col3 col3 col3 col3 col3 col3</p>
    						<p>col3 col3 col3 col3 col3 col3</p>
    					</div>
    				</div>
    			</div>
    		</div>
    	</div>
    

    CSS:

    .clearfix:before,.clearfix:after{content:" ";display:table;}.clearfix:after{clear:both;}.clearfix{*zoom:1;}
    .box{1000px;margin:0 auto;} .container3{100%;float:left;background:green;overflow:hidden;position:relative;} .container2{100%;float:left;background:yellow;position:relative;right:300px; /*等于col3的宽度*/} .container1{100%;float:left;background:orange;position:relative;right:400px;/*等于col2的宽度*/} .col1{300px;float:left;position:relative;left:700px;} .col2{400px;float:left;position:relative;left:700px;} .col3{300px;float:left;position:relative;left:700px;}

    效果

  • 相关阅读:
    oracle 动态SQL
    Oracle 学习PL/SQL
    SQL优化原理
    JAVA环境配置
    Java接口
    Java数据类型、操作符、表达式
    C#-VS配置开发环境-摘
    Java版本
    网站构建
    Java 时间、字符串
  • 原文地址:https://www.cnblogs.com/aimee2004/p/5140423.html
Copyright © 2011-2022 走看看