.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. SQL Server 批量插入数据

    请看代码: 创建表值参数类型: 请看代码:

  2. [CSAPP笔记]Binary , Unsigned , Signed 之间的相互装换

    LaTex+MarkDown+Pandoc组合套件写博客的处女作,试试效果.各自的分工为:Latex下编辑公式,在Sublime Text 2下使用Markdown排版,最后用Pandoc导出. 摘要 ...

  3. Qt QScrollArea and layout in code

    Qt QScrollArea and layout in code 一.参考文档: . Qt 第六章 QScrollArea类给QWidget添加滚动条 http://blog.csdn.net/co ...

  4. hiredis处理zscan和hscan的reply

    zscan的返回值可以看做是一个二维数组,第一维包含两个元素:string类型的游标cursor和集合元素数组:第二维即集合元素数组,这个数组交替存放着集合元素和score,元素和score也都是st ...

  5. hessian 协议 版本 兼容

    环境 : 服务端:  hessian 4.0.38 , spring 4.3.6 ; spring文档指出spring4.0以上的版本只能使用hessian 4.0以上的版本 客户端: hessian ...

  6. Jmeter简单的操作数据库

    mysql驱动包下载地址: https://dev.mysql.com/downloads/connector/j/ 1.添加驱动配置,把下载下来的驱动配置上去 2.添加‘配置元件-用户定义的变量’, ...

  7. BZOJ:5457: 城市(线段树合并)(尚待优化)

    5457: 城市 Time Limit: 20 Sec  Memory Limit: 512 MBSubmit: 18  Solved: 12[Submit][Status][Discuss] Des ...

  8. BZOJ4399 魔法少女LJJ【线段树合并】【并查集】

    Description 在森林中见过会动的树,在沙漠中见过会动的仙人掌过后,魔法少女LJJ已经觉得自己见过世界上的所有稀奇古怪的事情了 LJJ感叹道"这里真是个迷人的绿色世界,空气清新.淡雅 ...

  9. [Scala函数特性系列]——按名称传递参数

    通常情况下,函数的参数是传值参数:即参数的值在它被传递给函数之前被确定.但是,如果我们需要编写一个接收参数不希望马上计算,直到调用函数内的表达式才进行真正的计算的函数.对于这种情况,Scala提供按名 ...

  10. Jquery 点击父类全选子类 , 子类选父类

    <p> <label style="font-size:18px;font-weight: bold;" class="checkboxs"& ...