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

    网站上使用三列布局的还是比较多的,不过三列和两列有些相似:

    1.自适应三列  

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>三列自适应布局</title>
    </head>
    <style>
      .wrapper{
      	 880px;
      	height: 300px;
      	margin:0 auto;
      }
      .left{
      	float: left;
      	 33.3%;
      	height: 300px;
      	background-color: #ccc;
      }
      .middle{
      	float:left;
      	 33.3%;
      	height: 300px;
      	background-color: #9c9c9c;
      }
      .right{
      	float: right;
      	 33.3%;
      	height: 300px;
      	background-color: #198610;
      }
    </style>
    <body>
    	<div class="wrapper">
    		<div class="left"></div>
    		<div class="middle"></div>
    		<div class="right"></div>
    	</div>
    	
    </body>
    </html>
    

      

    2.固定两列,自适应中间一列

    这个要考虑多种情况,我就遇见过下面的情况,大家可以看看

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>三列两固定中列自适应布局</title>
    </head>
    <style>
      .wrapper{
      	 880px;
      	height: 300px;
      	margin:0 auto;
      }
      .left{
      	float: left;
      	 200px;
      	height: 300px;
      	background-color: #ccc;
      }
      .middle{
      	margin-left:200px;
      	margin-right:200px;
      	height: 300px;
      	background-color: #9c9c9c;
      }
      .right{
      	float: right;
      	 200px;
      	height: 300px;
      	background-color: #198610;
      }
    </style>
    <body>
    	<div class="wrapper">
    
    		<div class="left"></div>
    		<div class="middle">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>
    		<div class="right"></div>
    		
    		
    	</div>
    	
    </body>
    </html>
    

      

    这个是下面截图的样子

     

    看见没有,是这样的,但是如果我吧<div class="middle">放在最后,效果又不一样

     所以这个效果达到效果,这个也是三列布局,所以这个方式有点bugger,大家可以注意

    我们可以用用绝对定位,其实实现三列布局很多种方式,你也可以用table来实现,li来实现等方法

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>三列两固定中列自适应布局</title>
    </head>
    <style>
      .wrapper{
      	 880px;
      	height: 300px;
      	margin:0 auto;
      	position: relative;
      }
      .left{
      	position: absolute;
      	left: 0px;
      	top: 0px;
      	 200px;
      	height: 300px;
      	background-color: #ccc;
      }
      .middle{
      	margin-left:200px;
      	margin-right:200px;
      	height: 300px;
      	background-color: #9c9c9c;
      }
      .right{
      	position: absolute;
      	top: 0px;
      	right: 0px;
      	 200px;
      	height: 300px;
      	background-color: #198610;
      }
    </style>
    <body>
    	<div class="wrapper">
    
    		<div class="left"></div>
    		<div class="middle">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>
    		<div class="right"></div>
    
    		
    		
    	</div>
    	
    </body>
    </html>
    

    3.固定三列

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>三列两固定中列自适应布局</title>
    </head>
    <style>
      .wrapper{
      	 880px;
      	height: 300px;
      	margin:0 auto;
      	position: relative;
      }
      .left{
      	float: left;
      	 200px;
      	height: 300px;
      	background-color: #ccc;
      }
      .middle{
      	float: left;
      	 480px;
      	height: 300px;
      	background-color: #9c9c9c;
      }
      .right{
      	float: left;
      	 200px;
      	height: 300px;
      	background-color: #198610;
      }
    </style>
    <body>
    	<div class="wrapper">
    
    		<div class="left"></div>
    		<div class="middle">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>
    		<div class="right"></div>
    
    		
    		
    	</div>
    	
    </body>
    </html>
    

     我们这里都是做悬浮做了三列固定导航,如果在<div class="wrapper"></div>

    后加上一个<div class="footer"></div>  那么就要清除悬浮,清楚悬浮的方式有几种,后面我们会讲到 clear:both;或者在wrapper的类中加入 overflow:hidden. 或 :after :before等伪类的定义,清除悬浮

  • 相关阅读:
    Spring Boot + Spring Cloud 实现权限管理系统 后端篇(二十四):权限控制(Shiro 注解)
    Spring Boot + Spring Cloud 实现权限管理系统 后端篇(二十三):配置中心(Config、Bus)
    Spring Boot + Spring Cloud 实现权限管理系统 后端篇(二十二):链路追踪(Sleuth、Zipkin)
    Spring Boot + Spring Cloud 实现权限管理系统 后端篇(二十一):服务网关(Zuul)
    Spring Boot + Spring Cloud 实现权限管理系统 后端篇(二十):服务熔断(Hystrix、Turbine)
    Spring Boot + Spring Cloud 实现权限管理系统 后端篇(十九):服务消费(Ribbon、Feign)
    Spring Boot + Mybatis 实现动态数据源
    Spring Boot + Spring Cloud 实现权限管理系统 后端篇(十八):注册中心(Spring Cloud Consul)
    Spring Boot + Spring Cloud 实现权限管理系统 后端篇(十七):登录验证码实现(Captcha)
    Spring Boot + Spring Cloud 构建微服务系统(十):配置中心(Spring Cloud Bus)
  • 原文地址:https://www.cnblogs.com/kevinlifeng/p/5153088.html
Copyright © 2011-2022 走看看