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" ...
随机推荐
- Openstack命令行创建不同vlan段虚拟机
默认使用nova-network的vlan模式,但是在使用默认的dashboard的时候,不能指定创建的虚拟机的使用网段,固定IP地址. 实际上该功能是在存在的,只是openstack的dashbbo ...
- ASP.NET WEBAPI 简单CURD综合测试（asp.net MVC,json.net,sql基础存储过程和视图，sqlhelper,json解析）
草图 真正的后端是不管前端是什么平台,用什么语言的,JSON格式的数据应该可以应对.用ASP.NET WEBAPI尝试做一个后端,实现最基本的CURD,业务逻辑和数据库操作都放在后端,前端只需要正 ...
- tomcat，Jboss，weblogic区别与比较
一.tomcat Tomcat 服务器是一个免费的开放源代码的Web 应用服务器,它是Apache 软件基金会(Apache Software Foundation)的Jakarta 项目中的一个核心 ...
- ASP。net treeview xml
this.TreeView2.ShowLines = false; //显示连接子节点与父节点之间的线条 TreeNodeBinding area = new TreeNodeBinding(); a ...
- 关于NSLog
#ifdef __OBJC__#ifdef DEBUG#define NSLog(fmt,...) NSlog((@"%s [Line %d]" fmt),__PRETTY_FUN ...
- JS加密库Crypto-JS SEA加密
http://www.seacha.com/tools/aes.html 在该网站测试 CryptoJS有很多加密方式网上查阅后有 CryptoJS (crypto.js) 为 JavaScript ...
- 【Java】一个小程序，计算它包含的代码所需的耗时
写一个小程序,用来计算它包含的代码所需的耗时.虽然简单,测试代码是否耗时还是有点用的,不用重新写嘛~ import java.util.Date; import java.util.concurren ...
- Eclipse开发过程中个VM Arguments的设置
Eclipse开发过程中个VM Arguments的设置 1:jre中的Default VM Arguments: -Xms256M -Xmx640M -XX:PermSize=256m -XX:Ma ...
- [问题2014S09] 复旦高等代数II（13级）每周一题（第九教学周）
[问题2014S09] 证明: \(n\) 阶方阵 \(A\) 与所有的 \(A^m\,(m\geq 1)\) 都相似的充分必要条件是 \(A\) 的 Jordan 标准型为 \[\mathrm{d ...
- 一步一步学习underscore的封装和扩展方式
前言 underscore虽然有点过时,这些年要慢慢被Lodash给淘汰或合并. 但通过看它的源码,还是能学到一个库的封装和扩展方式. 第一步,不污染全局环境. ES5中的JS作用域是函数作用域. 函 ...