css布局之两列布局
我们见过两列布局的网站也很多，不过这种两列布局的分为两种：自适应和固定宽度
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布局之两列布局的更多相关文章
- css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法）
原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克以 ...
- css之页面两列布局
两列布局:左边固定,后边自适应 第一种方法:左边的div左浮动或者是绝对定位,右边的div加margin-left:左边div的宽度 html部分 <div class="left&q ...
- CSS布局——横向两列布局
1.固定两栏布局,使用float,注意对紧邻元素清除浮动影响.IE6在使用float布局同时设置横行margin的情况下会有双边距BUG,解决方案是加入_display:inline 代码如下: &l ...
- 慕课笔记利用css进行布局【两列布局】
<html> <head> <title>两列布局</title> <style type="text/css"> bo ...
- CSS常用布局方式-两列布局、三列布局
CSS基础 2.几种布局方式1)table布局 当年主流的布局方式,第一种是通过table tr td布局 示例: <style type="text/css"> ta ...
- bootstrap的栅格布局与两列布局结合使用
在工作中我们常常需要实现响应式布局,这个可以使用bootstrap的栅格系统来实现,我们在列里也需要实现一部分的响应式.比如下面的效果图,需要实现左边图标固定,右边的自适应 : 左边固定宽度,右边自适 ...
- div+css经典三行两列布局
写在前面 在面试的时候遇到这样一个笔试题,使用div+css布局一个三行两列的页面.这里主要考察的是css中postion的具体用法.详细信息可参考我这篇文章: [HTML/CSS]说说positio ...
- css布局--两列布局，左侧固定，右侧自适应（其中左侧要可以拖动，右侧水平滚动条）
(css布局所要实现的效果) 在前端面试中经常会被问到CSS布局,两列布局,左侧固定,右侧自适应.前几天去面试,遇到了这道题的升级版,要求左侧可拖动,右侧要有水平滚动条.拿到题目确实有些大脑短路,不知 ...
- css两列布局，一边固定宽度，另一边自适应
<!DOCTYPE HTML><HTML> <head> <meta charset="utf-8" ...
随机推荐
- debuggee python
my_debugger_defines.py #encoding:utf-8 from ctypes import * from sys import version as py_ver # In p ...
- Just a Hook(HDU1698 线段树的简单应用)
Just a Hook Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Prob ...
- 探究platform_driver中的shutdown用途
http://blog.csdn.net/moxiaomomo/article/details/7897943 "quiesce" 说的也不太明确,我的猜测是:比如系统中有一个大功 ...
- ABAP编辑器SE38、ABAP工作台SE80 切换
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- HDU-4527 小明系列故事——玩转十滴水 模拟
题意:就是平时玩的十滴水游戏,游戏者拥有一定的水滴,能够滴在某些位置,如果一个点上的体积超过了4就会爆炸,向四周传递一个小水滴.该题就是要求模拟这个过程. 分析:这里有一个问题就是不能够使用递归来处理 ...
- iOS - Git 代码版本管理
1.Git Git 是用 C 语言开发的分布版本控制系统.版本控制系统可以保留一个文件集合的历史记录,并能回滚文件集合到另一个状态(历史记录状态).另一个状态可以是不同的文件,也可以是不同的文件内容. ...
- AC自动机模板
贴份模板 胡大神和崔大神的组合模板 #include <iostream> #include<cstdio> #include<cstring> #include& ...
- Google Protocol Buffer的安装与.proto文件的定义
什么是protocol Buffer呢? Google Protocol Buffer( 简称 Protobuf) 是 Google 公司内部的混合语言数据标准. 我理解的就是:它是一种轻便高效的结构 ...
- 原！！mybatis如何直接 执行传入的任意sql语句 并按照顺序取出查询的结果集
需求: 1.直接执行前端传来的任何sql语句,parameterType="String", 2.对于任何sql语句,其返回值类型无法用resultMap在xml文件里配置或者返回 ...
- JS历史
JavaScript伴随着互联网的发展一起发展.互联网周边技术的快速发展,刺激和推动了JavaScript语言的发展. 2006年,jQuery函数库诞生,作者为John Resig.jQuery为操 ...