<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. Java动态代理和反射机制

    反射机制 Java语言提供的一种基础功能,通过反射,我们可以操作这个类或对象,比如获取这个类中的方法.属性和构造方法等. 动态代理:分为JDK动态代理.cglib动态代理(spring中的动态代理). ...

  2. Excel连接字符串在.NET中的应用

    转:https://www.cnblogs.com/jaxu/archive/2011/07/29/2121022.html 介绍几种在.NET中直接连接Excel作为数据源的几种方法以及连接字符串的 ...

  3. 转:Eclipse+webservice开发实例

    原文地址:http://blog.csdn.net/xw13106209/article/details/7049614 1.参考文献: 1.利用Java编写简单的WebService实例  http ...

  4. ext button 属性

    var buttonName = new Ext.Button({               id:"buttonName",               text:" ...

  5. [翻译] PTEHorizontalTableView

    PTEHorizontalTableView Horizontal UITableView inspired by EasyTableView. 水平滚动的UITableView,灵感来自于EasyT ...

  6. [C++] 用Xcode来写C++程序[2] 操作变量

    用Xcode来写C++程序[2] 操作变量 此节讲解包括变量的初始化的几种方式,以及泛型编程的两种变量赋值方式. 最基本的变量赋值以及操作: // operating with variables # ...

  7. UIView的无损截图

    UIView的无损截图 说明 1. 烂大街的代码 2. 写成category后,方便直接从drawRect中获取绘制出来的图片 3. 可以直接绘制图片供按钮设置背景图片用 4. 无损截图(包括alph ...

  8. 铁乐学python_md5校验两个文件的一致性

    # 写一个函数,参数是两个文件的路径 # 返回的结果是T/F # 判断两个文件的md5值是否相同 import hashlib def diff_md5(file1,file2): def chick ...

  9. C++ 读书笔记1

    c++ 笔记1 body { font-family: Helvetica, arial, sans-serif; font-size: 14px; line-height: 1.6; padding ...

  10. apt-spy来获得适合自己的源,适用于UBUNTU/Debian

    使用ubuntu和debian等使用APT源的系统,有些时候是不是会不知道哪里有源,哪里的源比较快让自己的宽带完全利用,我们可以用apt-spy来自动找到 apt-spy -d unstable -a ...