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

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. Linq To Sqlite 一一二二

    说在前头 之所以写下这些文字,主要是因为使用LINQ的同志们都觉它的美好(至于有多美好,各位心里知道,我就不在描述了,如果你是你还不了解LINQ,园子里有大把的文章),微软老哥只提供了自家的SQLSe ...

  2. 使用 greenDao 框架 操作数据库

    0.效果图

  3. python 笔记

    第一周2016/9/11   Python 2.0和3.0的区别 3.0 的模块名改了和之前的2.0 不一样 #!/usr/bin/env python # -*- coding:utf-8 -*- ...

  4. Asp.Net在多线程环境下的状态存储问题

    在应用开发中,我们经常需要设置一些上下文(Context)信息,这些上下文信息一般基于当前的会话(Session),比如当前登录用户的个人信息:或者基于当前方法调用栈,比如在同一个调用中涉及的多个层次 ...

  5. quick Cocos2dx lua 接anysdk

    quick3.3 的quick\samples\anysdk中有例子,具体用法可以参考官方文档,将的非常详细. 1.框架接口设计 系统介绍 必接入流程简要描述 消息通知 可扩展性 测试模式 添加测试账 ...

  6. Linq join on 多条件

    var a = from m in DbContext.Set<T1>() join q in DbContext.Set<T2>() on new { m.ID, Phone ...

  7. iOS-图文表并茂,手把手教你GCD

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

  8. JAVA线程池中的Callable和Future

    import java.util.Random; import java.util.concurrent.Callable; import java.util.concurrent.Completio ...

  9. 嵌入式之Linux系统裁剪和定制---(kernel+busyboxy+dropbear+nginx)

    本文将介绍通过完全手动定制内核,在此基础上添加 busybox ,并实现远程登陆,使裁剪的 linux 能够运行 nginx . 在此之前介绍一下 linux 系统的启动流程. linux系统启动流程 ...

  10. Java程序员开发参考资源

    构建 这里搜集了用来构建应用程序的工具. Apache Maven:Maven使用声明进行构建并进行依赖管理,偏向于使用约定而不是配置进行构建.Maven优于Apache Ant.后者采用了一种过程化 ...