代码下载：https://files.cnblogs.com/files/xiandedanteng/TwoColumnLayout.rar

效果展示：

代码：

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>标题</title>
     <style>
        .main{
                float:right;
                width:100%;
                margin-left:-220px;
        }
        .content{
            margin-left:220px;
            border:1px #223344 solid;
            padding:5px;
            word-wrap:break-word;
            word-break: break-all;
        }
        .side{
            float:left;
            width:200px;
            border:1px #455664 dashed;
        }
     </style>
    </head>

     <body>
        <div class="main">
            <div class="content">
                <div>
                ......
                </div>
            </div>
        </div>
        <div class="side">
                <ul>
                    <li>菜单一</li>
                    <li>菜单二</li>
                    <li>菜单三</li>
                    <li>菜单四</li>
                </ul>
        </div>
     </body>
</html>
<script type="text/javascript">
<!--
    // 脚本
//-->
</script>

常见CSS两栏式布局的更多相关文章

  1. css布局 - 两栏自适应布局的几种实现方法汇总

    这种两列布局的样式是我们在平时工作中非常常见的设计,同时也是面试中要求实现的高频题.很有必要掌握以备不时之需: 整理了几种实现方法,当然,风骚的代码不止这几种能实现,欢迎各位的补充. 方法汇总目录 简 ...

  2. css实现等高布局 两栏自适应布局 三栏自适应布局

    等高布局: HTML结构如下: <div class="wrapper"> <div class="box"> <h1>.. ...

  3. css多栏自适应布局

    css多栏自适应布局还是需要总结一下的,都是基本功. 一般使用position属性布局,或者用float属性布局,也可以使用display属性. 看资料说position适合首页布局,因为首页内容往往 ...

  4. CSS实现响应式布局

    用CSS实现响应式布局 响应式布局感觉很高大上,很难,但实际上只用CSS也能实现响应式布局要用的就是CSS中的没接查询,下面就介绍一下怎么运用: 使用@media 的三种方法 1.直接在CSS文件中使 ...

  5. Responsive Web CSS – 在线响应式布局创建器

    如果您已经使用了 CSS 或前端框架,创建响应式布局应该不难. 然而,如果你刚涉足这类布局,Responsive Web CSS 可以帮助你快速上手. 这是一个基于 Web 的工具,使任何人都可以通过 ...

  6. css布局 - 工作中常见的两栏布局案例及分析

    突然想到要整理这么一篇平时工作中相当常见但是我们又很忽视的布局的多种处理方法.临时就在我经常浏览的网站上抓的相对应的截图.(以后看到其他类型的我再补充) 既然截了图,咱们就直接看人家使用的布局方式,毕 ...

  7. CSS+DIV两栏式全屏布局

    在网上找了很久,发现大部分都是固定宽度设置两栏,全屏情况下的布局很少.最后终于完成了,写出来备查,也供大家参考. <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  8. css两栏布局、圣杯布局、双飞翼布局

    最近几个月一直用vue在写手机端的项目,主要写业务逻辑,在js方面投入的时间和精力也比较多.这两天写页面明显感觉css布局方面的知识有不足,所以复习一下布局方法. 两栏布局 1.浮动 .box1 .l ...

  9. 【css】响应式布局入门【转】

    最近研究响应式设计框架的时候,发现网上很多相关的属性介绍,却很少有系统的入门级使用的文章,我自己整理了一篇入门知识,并没有什么高深的理论,也不牵扯到框架. 目前已经越来越多的站点以及wap站点使用响应 ...

随机推荐

  1. ActionContext源码

    /* * Copyright 2002-2006,2009 The Apache Software Foundation. * * Licensed under the Apache License, ...

  2. jquery复制当前tr行

    //复制 var vBudgetCompileObj = (function() { /*table新增/移除行,参数:tableId*/ var getMaxIndex; var funGenera ...

  3. Visual Studio调试技巧 -- Attach to Process

    本文系作者原创,但可随意转载.另:图中使用的IDE为Visual Studio 2013 RC 英文版. 一般写完代码时,我们通常会启动调试运行一下看看是否正确,启动运行的方式无非是F5-- Star ...

  4. 深海机器人（cogs 742）

    «问题描述:深海资源考察探险队的潜艇将到达深海的海底进行科学考察.潜艇内有多个深海机器人.潜艇到达深海海底后,深海机器人将离开潜艇向预定目标移动.深海机器人在移动中还必须沿途采集海底生物标本.沿途生物 ...

  5. IOS-内存检测以及优化

    IOS-内存检测以及优化 2014年01月23日 Jason PS:开始写这个系列的笔记:主要是对过去自己比较模糊的一些概念进行测试,明确结果,提高自己 IOS 应用如果占用系统的内容过大(8GB), ...

  6. Union和Concat的区别，以及它们的速度 (C# Linq)

    原文发布时间为:2011-06-29 -- 来源于本人的百度文章 [由搬家工具导入] Union 会去重复后合并。而Contact不去重直接合并。 所以Contact当然比较快了。所以如果你不用去重的 ...

  7. Docker(一)：什么是docker

    Docker 是一个开源项目,诞生于 2013 年初,最初是 dotCloud 公司内部的一个业余项目.它基于 Google 公司推出的 Go 语言实现. 项目后来加入了 Linux 基金会,遵从了 ...

  8. poj 3311 Hie with the Pie 经过所有点(可重)的最短路径 floyd + 状压dp

    题目链接 题意 给定一个\(N\)个点的完全图(有向图),求从原点出发,经过所有点再回到原点的最短路径长度(可重复经过中途点). 思路 因为可多次经过同一个点,所以可用floyd先预处理出每两个点之间 ...

  9. delphi 内存泄露 分析

  10. 浅谈控件(组件)制作方法一（附带一delphi导出数据到Excel的组件实例）（原创）

    来自:http://blog.csdn.net/zhdwjie/article/details/1490741 -------------------------------------------- ...