代码下载：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. SGX技术初探

    一.SGX技术背景 1.1 SGX技术定义 SGX全称Intel Software Guard Extensions,顾名思义,其是对因特尔体系(IA)的一个扩展,用于增强软件的安全性.这种方式并不是 ...

  2. 基于 Spring 和 iBATIS 的动态可更新多数据源持久层

    前言 我们时常会遇到一些 web 项目,需要从不同的数据源中抓取数据来进行分析,而这些数据源是有可能变化的,需要用户来进行动态的维护和添加.可是,大多数的 web 程序使用了应用服务器或者容器中间件来 ...

  3. PAT1028

    某城镇进行人口普查,得到了全体居民的生日.现请你写个程序,找出镇上最年长和最年轻的人. 这里确保每个输入的日期都是合法的,但不一定是合理的——假设已知镇上没有超过200岁的老人,而今天是2014年9月 ...

  4. 监视网络接口TCP状态信息数据有多种工具或命令。下面举例一些：

    nstat命令 nstat kernel ======= ss -s == netstat -i netstat -s ip -s link sar -n DEV 1

  5. 习题：Dual Matrices（思路题/分治）

    tyvj1764 描述一个N行M列的二维矩阵,矩阵的每个位置上是一个绝对值不超过1000的整数.你需要找到两个不相交的A*B的矩形,使得这两个矩形包含的元素之和尽量大.注:A*B的矩形指连续的A行.B ...

  6. 排列计数（permutation）

    排列计数(permutation) 题目描述 求有多少种长度为n的序列A,满足以下条件: 1) 1~n这n个数在序列中各出现了一次 2) 若第i个数A[i]的值为i,则称i是稳定的.序列恰好有m个数是 ...

  7. sql中的like和正则的区别

    like,模糊查询,更多的是用于匹配已知的字符,比如查询该字段含有1的记录,like ‘%1%’:但是如果要匹配不确定的,但是一个系列的字符,比如数字,最好用regexpselect * from t ...

  8. html5拖动文件上传

    使用html5的fileReader api <!DOCTYPE html><html lang="en"><head> <meta ch ...

  9. BZOJ 1658 Water Slides 滑水

    Water Slides 滑水 [问题描述] It's a hot summer day, and Farmer John is letting Betsy go to the water park ...

  10. [LeetCode] Remove Duplicates from Sorted List 链表

    Given a sorted linked list, delete all duplicates such that each element appear only once. For examp ...