代码下载：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. Eclipse 4.6(最新版本) js文件不能F3

    解决办法........我是没找到解决4.6版本的办法!不过可以换一个版本!猜想是因为 最新版本强制要求使用jdk1.8所导致的~!  换了一个4.5版本就一切Ok 换上主题一样漂亮护眼

  2. SQL SERVER存储引擎——04.数据

    4. SQL SERVER存储引擎之数据篇 (4.1)文件 (0)主数据文件.mdf初始文件大小至少为3MB,次要数据文件.ndf初始大小,同日志文件一样至少为512KB: (1)SQL SERVER ...

  3. 【转】Apache Thrift - 可伸缩的跨语言服务开发框架

    Apache Thrift - 可伸缩的跨语言服务开发框架 Apache Thrift 是 Facebook 实现的一种高效的.支持多种编程语言的远程服务调用的框架.本文将从 Java 开发人员角度详 ...

  4. BZOJ 1057：[ZJOI2007]棋盘制作（最大01子矩阵+奇偶性）

    [ZJOI2007]棋盘制作                                          时间限制: 20 Sec 内存限制: 162 MB[题目描述]国际象棋是世界上最古老的博 ...

  5. BZOJ1491 [NOI2007]社交网络 【floyd】

    题目 在社交网络(socialnetwork)的研究中,我们常常使用图论概念去解释一些社会现象.不妨看这样的一个问题. 在一个社交圈子里有n个人,人与人之间有不同程度的关系.我们将这个关系网络对应到一 ...

  6. spring+freemarker+redis

    1./pom.xml文件内容: <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http ...

  7. git 生成patch和打patch

    有这样的 目录层次 x/xx/xxx/xxx/ttt.c而 我的 当前位置 是在 x/下 ,执行git diff> test.patch 在test.patch补丁文件里的路径信息是这样的:- ...

  8. 在vue中使用Element-UI

    Element-UI是一套基于Vue2.0的UI组件库,http://element.eleme.io/#/zh-CN/component/carousel 首先npm install element ...

  9. P1143 飘飘乎居士的约会

    P1143 飘飘乎居士的约会 时间: 1000ms / 空间: 131072KiB / Java类名: Main 背景  一阵狂风吹过  只听“pong”的一声,飘飘乎居士降落了!!! 描述 又是美妙 ...

  10. xCode控制台的使用-应用闪退原因跟踪

    xCode控制台的使用-应用闪退原因跟踪 今天遇到这个一个问题,使用xCode version = 5.0 编译一个程序,刷到IOS7设备后,应用运行正常,但是刷新到IOS<7,打开饮用后就会出 ...