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

    我们见过两列布局的网站也很多,不过这种两列布局的分为两种:自适应和固定宽度

    1.自适应两列布局

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>两列之自适应布局</title>
    </head>
    <style>
      .left{
      	float: left;
      	 20%;
      	height: 300px;
      	background-color: #ccc;
    
      }
      .right{
      	float: right;
      	 80%;
      	height: 300px;
      	background-color: #198610;
      }
    </style>
    <body>
    	<div class="left"></div>
    	<div class="right"></div>
    	
    </body>
    </html>
    

     高度其实在开发中是不要加入的,因为这里是为了更加好的展示这个demo所以设置了高度。这个demo就是自适应的,根据页面的的宽度自动调整左右两列的宽度,大家可以试试。

    2.下面是一个固定,一个自适应的两列布局

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>两列之固定左列布局</title>
    </head>
    <style>
      .left{
      	float: left;
      	 200px;
      	height: 300px;
      	background-color: #ccc;
    
      }
      .auto-right{
      	margin-left: 200px;
      	height: 300px;
      	background-color: #198610;
      }
    </style>
    <body>
    	<div class="left"></div>
    	<div class="auto-right"></div>
    	
    </body>
    </html>
    

      左边我设置了一个宽度,右边的列则使用了margin-left:200px ,这个外边距刚好是左边的宽度。希望对大家有帮助

    3.两列固定,我们用一个外部容器保存

    <!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;
    
      }
      .right{
      	float: right;
      	 680px;
      	height: 300px;
      	background-color: #198610;
      }
    </style>
    <body>
    	<div class="wrapper">
    		<div class="left"></div>
    		<div class="right"></div>
    	</div>
    	
    </body>
    </html>
    

      

  • 相关阅读:
    pandas_处理异常值缺失值重复值数据差分
    【C语言】输入10个人的成绩,求平均值
    【Markdown】新手快速入门基础教程
    【Python】 平方根
    【Python】 数字求和
    【Python】文件下载小助手
    【Python爬虫程序】抓取MM131美女图片,并将这些图片下载到本地指定文件夹。
    【Python】爬虫原理
    C语言最重要的知识点(电子文档)
    【Python】一些函数
  • 原文地址:https://www.cnblogs.com/kevinlifeng/p/5153081.html
Copyright © 2011-2022 走看看