.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. k近邻法( k-nearnest neighbor)

    基本思想: 给定一个训练数据集,对新的输入实例,在训练数据集中找到与该实例最邻近的k个实例,这k个实例的多数属于某个类,就把该输入实例分为这个类 距离度量: 特征空间中两个实例点的距离是两个实例点相似 ...

  2. java入门学习(6)—封装,继承,多态,this,super,初始代码块

    1.[封装]:将对象的状态信息隐藏,不允许直接访问,而是通过该类提供的的方法阿里实现内部信息的访问和操作. 使用到的修饰符:private,不用修饰符(default),protected,publi ...

  3. Machine Learning|Andrew Ng|Coursera 吴恩达机器学习笔记(完结)

    Week 1: Machine Learning: A computer program is said to learn from experience E with respect to some ...

  4. python使用progressbar显示进度条

    progressbar安装: pip install progressbar 用法一 # -*- coding=utf-8 -*- import time from progressbar impor ...

  5. [QT]数据库SQLITE使用错误记录

    1.仿照创建数据库的例程编写代码,出现以下问题: ① 创建QSqlQuery query;   注意:这里没有将 query 与 QSqlSatabase db, 关联,正确的应该是 : QSqlQu ...

  6. 字符编码:ASCII,Unicode和UTF-8

    字符编码是计算机技术的基石,想要熟练使用计算机,就必须懂得一点字符编码的知识. 1. ASCII码 我们知道,在计算机内部,所有的信息最终都表示为一个二进制的字符串.每一个二进制位(bit)有0和1两 ...

  7. Tornado部署与运行

    运行多个Tornado实例 网页响应不是特别的计算密集型处理多个实例充分利用 CPU多端口怎么处理4.使用Supervisor监控Tornado进程安装(注意看是否需要指定使用python2版本) s ...

  8. linux主次设备号【转载】

    一个字符设备或者块设备都有一个主设备号和次设备号.主设备号和次设备号统称为设 备号.主设备号用来表示一个特定的驱动程序.次设备号用来表示使用该驱动程序的各 设备.例如一个嵌入式系统,有两个LED指示灯 ...

  9. java nio和bio

    理解同步/异步,阻塞/非阻塞:https://juejin.im/entry/598da7d16fb9a03c42431ed3 2:http://qindongliang.iteye.com/blog ...

  10. How to install torcs package in Debian

    Installation instructions Installing torcs package in Debian Wheezy is as easy as running: 没想到在debia ...