.main,.sitebar{
      height: 300px;
      font: bolder 20px/300px "微软雅黑";
      color: black;
      text-align: center;
}
.main{
      width: 100%;
      float: left;
}
.main .content{
      margin-left: 200px;
      background: red;
}
.sitebar{
      width: 200px;
      float: left;
      margin-left: -100%;
      background: green;
}
<div class="main">
      <div class="content">hhhhhhhhhhhhh</div>
</div>
<div class="sitebar">
      hehhehhe
</div>

两栏自适应布局,右侧div宽高不定的更多相关文章

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

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

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

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

  3. 利用float与overflow:hidden实现移动端两栏自适应布局

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 【转】CSS深入理解流体特性和BFC特性下多栏自适应布局

    这篇文章发布于 2015年02月12日,星期四,23:36,归类于 css相关. 阅读 30873 次, 今日 63 次 by zhangxinxu from http://www.zhangxinx ...

  5. css多栏自适应布局

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

  6. CSS深入理解流体特性和BFC特性下多栏自适应布局

    一.块状元素的流体特性与自适应布局 块状元素像放在容器中的水流一样,内容区域会随着margin, padding, border的出现自动填满剩余空间,这就是块状元素的流体特性. 来一个小实验: di ...

  7. 使用CSS实现三栏自适应布局(两边宽度固定,中间自适应)

    来源:http://blog.csdn.net/cinderella_hou/article/details/52156333 所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这道题在今年 ...

  8. css 多栏自适应布局

    在页面重构中,我们经常会需要实现多栏布局,例如n栏固定宽度 + m栏自适应宽度的组合,绝对布局+padding+百分比宽度是容易想到的比较暴力的解决方法,但是作为未来的"工程师", ...

  9. 你知道BFC、IFC、FFC、GFC及多栏自适应布局吗?

    FC(Formatting Context)格式化内容,常见的FC有BFC.IFC.FFC.GFC四种类型,BFC和IFC是W3C CSS2.1规范提出的概念,FFC和GFC是W3C CSS3规范提出 ...

随机推荐

  1. Shell 命令行实现将一个站点页面全部下载到本地并替换其中链接的脚本

    Shell 命令行实现将一个站点页面全部下载到本地并替换其中链接的脚本 不知道为什么,我总想用 Shell 脚本来实现把一个站点内容给下载下来.但是下载什么站点我确不知道.今天尝试了一下利用 curl ...

  2. MongoDB 安装、运行、使用、数据恢复

     1.安装MongoDB社区版 # . 导入MongoDB public GPG Key sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com ...

  3. 解决visual studio2017没有系统类和方法注释的问题

    好几次碰到这种情况了,每次都得稍微查一查才能解决这个问题,相信也有不少人遇到这个问题,在对方法还不是很熟练的时候,将鼠标放置到方法上去,就会有信息提示是一件非常方便的事情,本文的解决方法同样适用于只显 ...

  4. chrome 55 zepto tap事件出错?

    刚才升级chrome后发现的,在54.0.2840.98上点击没有问题,在新升级的55.0.2883.75 上点击后会报错Cannot read property 'trigger' of undef ...

  5. NSArray中的对象进行排序

    看在iOS中有哪些方法可以对NSArray中的对象进行排序.下面是目录: 小引 使用NSComparator进行排序 使用NSDescriptor进行排序 使用selector进行排序 小引 我们将要 ...

  6. c# mysql and sqlserver数据库连接字符串

    .net 项目访问sqlserver 和mysql 两种数据库时,连接字符串有些不一样 具体配置如下 <connectionStrings> <add name="mysq ...

  7. 使用 MSBuild 响应文件 (rsp) 来指定 dotnet build 命令行编译时的大量参数

    在为开源项目 easiwin/MSTestEnhancer 进行持续集成编译时,需要在编译命令中传入较多的参数.这对于新接手此项目的人来说,成本还是高了一点儿.本文将介绍 MSBuild 响应文件 ( ...

  8. Django 打印

    转自:http://bbs.chinaunix.net/archiver/tid-1227401.html fentin 发表于 2008-07-28 17:52:44 请教Django Python ...

  9. python3.x 类和对象

    python同样支持类和对象.在python3.x中没有了经典类,只有新式类,默认创建的就是新式类.具体的新式类与经典类的不同在python3.x中已经没有意义了. 类的定义和实例化 python定义 ...

  10. python 打印对象所有属性值

    from pprint import pprint pprint (vars(your_object)) 另外查看所有属性名用.__dict__