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

1.自适应两列布局

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>两列之自适应布局</title>

</head>

<style>

  .left{

  	float: left;

  	width: 20%;

  	height: 300px;

  	background-color: #ccc;

  }

  .right{

  	float: right;

  	width: 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;

  	width: 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{

  	width: 880px;

  	height: 300px;

  	margin:0 auto;

  }

  .left{

  	float: left;

  	width: 200px;

  	height: 300px;

  	background-color: #ccc;

  }

  .right{

  	float: right;

  	width: 680px;

  	height: 300px;

  	background-color: #198610;

  }

</style>

<body>

	<div class="wrapper">

		<div class="left"></div>

		<div class="right"></div>

	</div>

</body>

</html>

　　

css布局之两列布局的更多相关文章

  1. css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法）

    原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克以 ...

  2. css之页面两列布局

    两列布局:左边固定,后边自适应 第一种方法:左边的div左浮动或者是绝对定位,右边的div加margin-left:左边div的宽度 html部分 <div class="left&q ...

  3. CSS布局——横向两列布局

    1.固定两栏布局,使用float,注意对紧邻元素清除浮动影响.IE6在使用float布局同时设置横行margin的情况下会有双边距BUG,解决方案是加入_display:inline 代码如下: &l ...

  4. 慕课笔记利用css进行布局【两列布局】

    <html> <head> <title>两列布局</title> <style type="text/css"> bo ...

  5. CSS常用布局方式-两列布局、三列布局

    CSS基础 2.几种布局方式1)table布局 当年主流的布局方式,第一种是通过table tr td布局 示例: <style type="text/css"> ta ...

  6. bootstrap的栅格布局与两列布局结合使用

    在工作中我们常常需要实现响应式布局,这个可以使用bootstrap的栅格系统来实现,我们在列里也需要实现一部分的响应式.比如下面的效果图,需要实现左边图标固定,右边的自适应 : 左边固定宽度,右边自适 ...

  7. div+css经典三行两列布局

    写在前面 在面试的时候遇到这样一个笔试题,使用div+css布局一个三行两列的页面.这里主要考察的是css中postion的具体用法.详细信息可参考我这篇文章: [HTML/CSS]说说positio ...

  8. css布局--两列布局，左侧固定，右侧自适应（其中左侧要可以拖动，右侧水平滚动条）

    (css布局所要实现的效果) 在前端面试中经常会被问到CSS布局,两列布局,左侧固定,右侧自适应.前几天去面试,遇到了这道题的升级版,要求左侧可拖动,右侧要有水平滚动条.拿到题目确实有些大脑短路,不知 ...

  9. css两列布局，一边固定宽度，另一边自适应

    <!DOCTYPE HTML><HTML>    <head>                <meta charset="utf-8" ...

随机推荐

  1. 通过Trainingkit对Azure有一个初步的了解

    学习Azure有一个非常不错的资料库Azure training kit. 这里面包含了很多Azure团队编写的实例代码,以及为初学Azure的开发人员准备的新手教学课程. 开发人员可以从http:/ ...

  2. [转]Git调用第三方对比工具beyondCompare

    点击阅读原文 对于我这种 git 命令行小白来说, git 自带的对比工具各种水土不服,想念以前的 svn 小乌龟 + beyondCompare 的日子...纠结完 gitHub client 未果 ...

  3. Dynamics AX 2012 R2 安装 AIF IIS上的Web服务

    1.为什么使用IIS上的WEB服务 组件? 如果你要在Dynamics AX Service中使用HTTP Adapter,那么你就要安装IIS上的WEB服务 组件.HTTP Adapter会在IIS ...

  4. dynamics_cast<>

    #include <iostream> class A { public: A(){} ~A(){} ;} }; class B:public A { public: B(){} ~B() ...

  5. [充电]多线程无锁编程--原子计数操作：__sync_fetch_and_add等12个操作

    转自:http://blog.csdn.net/minCrazy/article/details/40791795 多线程间计数操作.共享状态或者统计相关时间次数,这些都需要在多线程之间共享变量和修改 ...

  6. Ajax实现原理详解

    Ajax:Asynchronous javascript and xml,实现了客户端与服务器进行数据交流过程.使用技术的好处是:不用页面刷新,并且在等待页面传输数据的同时可以进行其他操作. 这就是异 ...

  7. noi 6049 买书

    题目链接: http://noi.openjudge.cn/ch0206/6049/ 6049:买书 查看 提交 统计 提问 总时间限制: 1000ms 内存限制: 65536kB 描述 小明手里有n ...

  8. iOS-图文表并茂，手把手教你GCD

    前言 对初学者来说,GCD似乎是一道迈不过去的坎,很多人在同步.异步.串行.并行和死锁这几个名词的漩涡中渐渐放弃治疗.本文将使用图文表并茂的方式给大家形象地解释其中的原理和规律. 线程.任务和队列的概 ...

  9. python之rabbitMQ篇

    一.RabbitMQ安装 RabbitMQ是一个在AMQP基础上完整的,可复用的企业消息系统,它遵循Mozilla Pulic License开源协议. MQ全称为Message Queue,消息队列 ...

  10. Flowplayer-encoding

    SOURCE URL: https://flowplayer.org/docs/encoding.html Video encoding To ease the task of encoding yo ...