代码下载：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. maven学习（三）——修改maven本地默认仓库

    修改从Maven中心仓库下载到本地的jar包的默认存储位置 从Maven中心仓库下载到本地的jar包的默认存放在”${user.home}/.m2/repository”中,${user.home}表 ...

  2. BZOJ 1051：[HAOI2006]受欢迎的牛（强连通分量）

    受欢迎的牛Description每一头牛的愿望就是变成一头最受欢迎的牛.现在有N头牛,给你M对整数(A,B),表示牛A认为牛B受欢迎. 这种关系是具有传递性的,如果A认为B受欢迎,B认为C受欢迎,那么 ...

  3. Linux系统——常见的系统调用

    本文列出了大部分常见的Linux系统调用,并附有简要中文说明. 以下是Linux系统调用的一个列表,包含了大部分常用系统调用和由系统调用派生出的的函数.这可能是你在互联网上所能看到的唯一一篇中文注释的 ...

  4. MFC 禁用输入法

    #include <Imm.h> HIMC m_hImc; // 全局或者成员变量 // Function for Disabling IME void CMyDialog::Disabl ...

  5. mongodb学习（3）--- NodeJs使用mongoose操作mongodb

    转载: https://cnodejs.org/topic/50c145ed637ffa4155c7eaee 首先对于以下错误说明(有写 db.close): Error: db object alr ...

  6. MySQL不容忽视SQL_MODE的设置

    CREATE DATABASE db_test; CREATE TABLE `tb1` ( `id` int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT ...

  7. Bazinga 题解

    第十四届浙江财经大学程序设计竞赛重现赛-B题 https://www.nowcoder.com/acm/contest/89/B 可能最近,脑子有问题,看见数论题都是秒,学弟问我这题怎么做,结果我沉思 ...

  8. [论文]A Link-Based Approach to the Cluster Ensemble Problem

    论文作者:Natthakan Iam-On, Tossapon Boongoen, Simon Garrett, and Chris Price 下次还是在汇报前先写了论文总结,不然有些点汇报时容易忘 ...

  9. Berkely DB Java Edition学习笔记

    Berkely DB对于高并发.要求速度快的应用来说是个不错的选择,mysql就是用BDB实现的(mysql的后台) ,mysql快,BDB比mysql还要快N倍.BDB是一种嵌入式的.非关系数据库, ...

  10. 打造好用的编辑终端环境yakuake

    我喜欢使用vim,由于不喜欢不够纯粹的东西,所以将伪终端打造的和真终端几乎一样,我的yakuake全屏是真的全屏,你也想这样,跟我来吧. 一.修改yakuake的皮肤文件,在/usr/share/ya ...