.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 命令行统计 apache 网站日志访问IP以及IP归属地

    Shell 命令行统计 apache 网站日志访问IP以及IP归属地 我的一个站点用 apache 服务跑着,积攒了很多的日志.我想用 shell 看看有哪些人访问过我的站点,并且他来自哪里. 因为日 ...

  2. vue做路由页面内容跳转

    安装----npm npm install vue-router 如果在一个模块化工程中使用它,必须要通过 Vue.use() 明确地安装路由功能: import Vue from 'vue' imp ...

  3. DevExpress GridControl 显示外部图片

    如果数据源中只包含图片的链接,如何在DevExpress GridControl的一列中显示外部图片? 要实现该功能,可通过非绑定列的方式来实现.具体实现方法如下: 1.    创建了一个非绑定列并设 ...

  4. ios PageControl and UIScrollView

    // //  AlbumViewController.m //  HwangKop08.18 // //  Created by rimi on 15/8/20. //  Copyright (c) ...

  5. javascript的slice()与splice()方法

    (1)数组和String对象都有slice()方法. //Array var list = ['A','B','C','D','DS']; console.log(list.slice(,));//截 ...

  6. jquery resize监听dom

    添加如下代码即可(function($,h,c){var a=$([]),e=$.resize=$.extend($.resize,{}),i,k="setTimeout",j=& ...

  7. LeetCode 973. K Closest Points to Origin

    原题链接在这里:https://leetcode.com/problems/k-closest-points-to-origin/ 题目: We have a list of points on th ...

  8. java 线程池--ExecutorService

    一 Java通过Executors提供四种线程池,分别为: newCachedThreadPool创建一个可缓存线程池,如果线程池长度超过处理需要,可灵活回收空闲线程,若无可回收,则新建线程. new ...

  9. kong 了解

      Kong 是在客户端和(微)服务间转发API通信的API网关,通过插件扩展功能.Kong 有两个主要组件: Kong Server :基于nginx  的服务器,用来接收 API 请求. Apac ...

  10. flannel vxlan 实现原理【转】

    flannel是coreos为kubernets提供的网络解决方案,主要为打通跨节点的容器通信,其中vxlan模式为flannel实现的一种后端模式,其他模式还包括udp, host-gw等,可以通过 ...