代码下载：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. 转载 hadoop 伪分布安装

    一. 概要        经过几天的调试,终于在Linux Cent OS 5.5下成功搭建Hadoop测试环境.本次测试在一台服务器上进行伪分布式搭建.Hadoop 伪分布式模式是在单机上模拟 Ha ...

  2. readonly和disabled区别

    1.readonly属性只对表单元素的文本框.密码框和 textarea 有效,而disabled属性对所有的表单元素都会有效. 2.设置两个属性的外观不一样,这个自己可以观察一下. 3.设置read ...

  3. 论文笔记《Fully Convolutional Networks for Semantic Segmentation》

    一.Abstract 提出了一种end-to-end的做semantic segmentation的方法,也就是FCN,是我个人觉得非常厉害的一个方法. 二.亮点 1.提出了全卷积网络的概念,将Ale ...

  4. Xposed初体验

    Xposed初体验 1 测试环境 硬件:小米2s 16GB 电信版 系统:MIUI 4.4.18(开发版) Xposed版本: 2.5 注:Xposed版本号必须大于2.3,MIUI系统版本号也必须大 ...

  5. webpack+babel+ES6+react环境搭建

    webpack+babel+ES6+react环境搭建 步骤: 1 创建项目结构 注意: 先创建一个项目目录  react  这个名字自定义,然后进入到这个目录下面 mkdir app //创建app ...

  6. SPOJ QTREE Query on a tree V

    You are given a tree (an acyclic undirected connected graph) with N nodes. The tree nodes are number ...

  7. 呵呵呵呵。。。系统还原了，终于可以用IE登陆百度了

    原文发布时间为:2009-12-19 -- 来源于本人的百度文章 [由搬家工具导入] 呵呵呵呵。。。今天终于有时间把系统还原了，终于可以用IE登陆百度了

  8. 网络上面好用的webserice方法【公开】

    原文发布时间为:2009-07-27 -- 来源于本人的百度文章 [由搬家工具导入] 本帖转自 http://www.webxml.com.cn/zh_cn/web_services.aspx?off ...

  9. poj 3261 Milk Patterns 后缀数组 + 二分

    题目链接 题目描述 给定一个字符串,求至少出现 \(k\) 次的最长重复子串,这 \(k\) 个子串可以重叠. 思路 二分 子串长度,据其将 \(h\) 数组 分组,判断是否存在一组其大小 \(\ge ...

  10. hdu 1848 Fibonacci again and again 组合游戏 SG函数

    题目链接 题意 三堆石子,分别为\(m,n,p\)个,两人依次取石子,每次只能在一堆当中取,并且取的个数只能是斐波那契数.最后没石子可取的人为负.问先手会赢还是会输? 思路 直接按定义计算\(SG\) ...