<div id="wrapper">
<div id="col1">
"fixed"
</div>
<div id="col2">
"fluid"
</div>
</div>
#wrapper{background:red;float:left;width:90%;height:200px;padding:5px}

#col1{
float:left;
width:100px;
height:100%;
background:green;
}
#col2{background:green;height:100%;margin-left:110px;margin-right:0px;}

http://jsfiddle.net/rhw0z1bj/

用margin实现两列布局中的自适应列的更多相关文章

  1. css 两列布局中单列定宽单列自适应布局的6种思路

    前面的话 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.本文将从float.inline-block.table.absolute.flex和grid这六种思路来详细说明如何巧妙地实现 ...

  2. margin负值在页面布局中的应用

    http://www.w3school.com.cn/tiy/t.asp 预览工具 一.左右列固定,中间列自适应布局 此例适用于左右栏宽度固定,中间栏宽度自适应的布局.由于网页的主体部分一般在中间,很 ...

  3. 三列布局中 float引发的一个问题-当“非float的元素”和“float的元素”在一起的时候,如果非float元素在先,那么float的元素将受到排斥。

    样式: 效果是这样的: 解答:我们发现:靠右的元素自动换行了,原因是:当“非float的元素”和“float的元素”在一起的时候,如果非float元素在先,那么float的元素将受到排斥. 解决方法: ...

  4. Dev gridView中设置自适应列宽和日期显示格式、金额的显示格式

    在Dev GridView控件中,数据库中表数据日期都是长日期格式(yyyy-MM-dd HH:mm:ss),但显示在控件变成短日期格式(yyyy-MM-dd),金额显示要显示精确的数值, 比如80. ...

  5. 一个DIV三列布局100%高度自适应的好例子(国外)

    <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W ...

  6. .net设置中GridView自适应列宽

    有一个项目只有30分钟开发时间,速成,使用了古老的.net gridview. 但需要列宽自适应好看些. 于是琢磨了,实现思路如下. 先看下大致效果(很粗暴没有优化) 代码如下: protected ...

  7. 两列等高布局 padding+margin的负值 CSS布局奇淫技巧之-多列等高

    代码: 效果图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/ ...

  8. DIV+CSS 网页布局之:一列布局

    1.网页布局 布局(layout)即对事物的全面规划和安排,页面布局是对页面的文字.图像或表格进行格式化版式排列.网页布局对改善网站的外观非常重要,又称版式布局,大多数网站会把内容安排到多个列中,就像 ...

  9. Css学习总结(3)——CSS布局解决方案 - 水平、垂直居中、多列布局、全屏布局

    居中布局 水平居中 子元素于父元素水平居中且其(子元素与父元素)宽度均可变. inline-block + text-align <div class="parent"> ...

随机推荐

  1. ORACLE AUDIT 审计

    转自 http://blog.csdn.net/dnnyyq/article/details/4525980 1.什么是审计 审计(Audit)用于监视用户所执行的数据库操作,并且Oracle会将审计 ...

  2. python利用unittest进行测试用例执行的几种方式

      利用python进行测试时,测试用例的加载方式有2种:  一种是通过unittest.main()来启动所需测试的测试模块:  一种是添加到testsuite集合中再加载所有的被测试对象,而tes ...

  3. 创建完美SDK的10个技巧

    [编者按]本文作者为 Gal Lavinsky,文中将列出10个零基础小技巧,帮你创建完美的Java SDK.文章系国内 ITOM 管理平台 OneAPM 编译呈现.以下为正文. 本文起源于笔者朋友的 ...

  4. pjax 和 ajax 的区别

    pjax 是一个 jQuery 插件,它通过 ajax 和 pushState 技术提供了极速的(无刷新 ajax 加载)浏览体验,并且保持了真实的地址.网页标题,浏览器的后退(前进)按钮也可以正常使 ...

  5. 将jsonModel转化为文件

    将jsonModel转化为文件 这个类是我自己写着用的,用于将字典文件直接转换成Model的文件,省去你写无数Model中属性的代码: TransformDictionary.h 与 Transfor ...

  6. IIS6与IIS7中的w3wp工作进程

    在IIS6中,每一个网站都有对应的应用程序池,在应用程序池有运行着网站的Application,在默认情况下,所有的网站的应用程序都会分配到默认的应用程序池当中,   当然,我们可以新建一个应用程序池 ...

  7. Windows下使用Git Bash上传项目到GitHub

    http://blog.csdn.net/qq_28304687/article/details/69959238?locationNum=8&fps=1

  8. September 17th 2017 Week 38th Sunday

    Distance could make you forget about them, but the memories would always be there. 距离会让你遗忘,但是回忆却始终在那 ...

  9. jquery.form.js mvc 上传文件 layer 选择框与等待效果

    HTML <form role="form" id="form1"> <div class="form-group"> ...

  10. Mina源码研究

    目录 1. NioSocketAcceptor初始化源码研究 1.1 类图 1.2 方法调用时序图 1.3 初始化NioSocketAcceptor 1.4 SimpleIoProcessorPool ...