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" ...
随机推荐
- .net环境下ckeditor与ckfinder中文文件链接乱码的问题
.net环境下ckeditor与ckfinder中文文件链接乱码的问题 将ckfinder.js中的getUrl:function(){return this.folder.getUrl()+enco ...
- ROS探索总结（三）——ROS新手教程【转】
转自:http://blog.csdn.net/hcx25909/article/details/8811313 版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[-] 一ROS的 ...
- IsBackground的理解
1.当在主线程中创建了一个线程,那么该线程的IsBackground默认是设置为FALSE的. 2.当主线程退出的时候,IsBackground=FALSE的线程还会继续执行下去,直到线程执行结束. ...
- 03-组合逻辑电路设计之译码器——小梅哥FPGA设计思想与验证方法视频教程配套文档
芯航线——普利斯队长精心奉献 课程目标: 1. 再次熟悉Quartus II工程的建立以及完整的FPGA开发流程 2. 以译码器为例学会简单组合逻辑电路设计 实验平台:无 实验原理: 组合逻辑, ...
- js 操作 字符串
去w3school看看string的基本方法把: 方法描述 anchor() 创建 HTML 锚. big() 用大号字体显示字符串. blink() 显示闪动字符串. ...
- quick Cocos2dx lua 接anysdk
quick3.3 的quick\samples\anysdk中有例子,具体用法可以参考官方文档,将的非常详细. 1.框架接口设计 系统介绍 必接入流程简要描述 消息通知 可扩展性 测试模式 添加测试账 ...
- Hadoop学习笔记：MapReduce框架详解
开始聊mapreduce,mapreduce是hadoop的计算框架,我学hadoop是从hive开始入手,再到hdfs,当我学习hdfs时候,就感觉到hdfs和mapreduce关系的紧密.这个可能 ...
- VIM 常用错误解决
1.option ‘omnifunc’ is not set 错误: vim7下Omni completion默认情况下是没有开启的,有时候自定义的vimrc文件会实现自动补齐,例如vim-autoc ...
- minicom 使用教程
因为现在电脑基本不配备串行接口,所以,usb转串口成为硬件调试时的必然选择.目前知道的,PL2303的驱动是有的,在dev下的名称是ttyUSB#. minicom,tkterm都是linux下应用比 ...
- HDU3333 Turing Tree 树状数组+离线处理
Turing Tree Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total ...