用margin实现两列布局中的自适应列
<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实现两列布局中的自适应列的更多相关文章
- css 两列布局中单列定宽单列自适应布局的6种思路
前面的话 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.本文将从float.inline-block.table.absolute.flex和grid这六种思路来详细说明如何巧妙地实现 ...
- margin负值在页面布局中的应用
http://www.w3school.com.cn/tiy/t.asp 预览工具 一.左右列固定,中间列自适应布局 此例适用于左右栏宽度固定,中间栏宽度自适应的布局.由于网页的主体部分一般在中间,很 ...
- 三列布局中 float引发的一个问题-当“非float的元素”和“float的元素”在一起的时候,如果非float元素在先,那么float的元素将受到排斥。
样式: 效果是这样的: 解答:我们发现:靠右的元素自动换行了,原因是:当“非float的元素”和“float的元素”在一起的时候,如果非float元素在先,那么float的元素将受到排斥. 解决方法: ...
- Dev gridView中设置自适应列宽和日期显示格式、金额的显示格式
在Dev GridView控件中,数据库中表数据日期都是长日期格式(yyyy-MM-dd HH:mm:ss),但显示在控件变成短日期格式(yyyy-MM-dd),金额显示要显示精确的数值, 比如80. ...
- 一个DIV三列布局100%高度自适应的好例子(国外)
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W ...
- .net设置中GridView自适应列宽
有一个项目只有30分钟开发时间,速成,使用了古老的.net gridview. 但需要列宽自适应好看些. 于是琢磨了,实现思路如下. 先看下大致效果(很粗暴没有优化) 代码如下: protected ...
- 两列等高布局 padding+margin的负值 CSS布局奇淫技巧之-多列等高
代码: 效果图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/ ...
- DIV+CSS 网页布局之:一列布局
1.网页布局 布局(layout)即对事物的全面规划和安排,页面布局是对页面的文字.图像或表格进行格式化版式排列.网页布局对改善网站的外观非常重要,又称版式布局,大多数网站会把内容安排到多个列中,就像 ...
- Css学习总结(3)——CSS布局解决方案 - 水平、垂直居中、多列布局、全屏布局
居中布局 水平居中 子元素于父元素水平居中且其(子元素与父元素)宽度均可变. inline-block + text-align <div class="parent"> ...
随机推荐
- ORACLE AUDIT 审计
转自 http://blog.csdn.net/dnnyyq/article/details/4525980 1.什么是审计 审计(Audit)用于监视用户所执行的数据库操作,并且Oracle会将审计 ...
- python利用unittest进行测试用例执行的几种方式
利用python进行测试时,测试用例的加载方式有2种: 一种是通过unittest.main()来启动所需测试的测试模块: 一种是添加到testsuite集合中再加载所有的被测试对象,而tes ...
- 创建完美SDK的10个技巧
[编者按]本文作者为 Gal Lavinsky,文中将列出10个零基础小技巧,帮你创建完美的Java SDK.文章系国内 ITOM 管理平台 OneAPM 编译呈现.以下为正文. 本文起源于笔者朋友的 ...
- pjax 和 ajax 的区别
pjax 是一个 jQuery 插件,它通过 ajax 和 pushState 技术提供了极速的(无刷新 ajax 加载)浏览体验,并且保持了真实的地址.网页标题,浏览器的后退(前进)按钮也可以正常使 ...
- 将jsonModel转化为文件
将jsonModel转化为文件 这个类是我自己写着用的,用于将字典文件直接转换成Model的文件,省去你写无数Model中属性的代码: TransformDictionary.h 与 Transfor ...
- IIS6与IIS7中的w3wp工作进程
在IIS6中,每一个网站都有对应的应用程序池,在应用程序池有运行着网站的Application,在默认情况下,所有的网站的应用程序都会分配到默认的应用程序池当中, 当然,我们可以新建一个应用程序池 ...
- Windows下使用Git Bash上传项目到GitHub
http://blog.csdn.net/qq_28304687/article/details/69959238?locationNum=8&fps=1
- September 17th 2017 Week 38th Sunday
Distance could make you forget about them, but the memories would always be there. 距离会让你遗忘,但是回忆却始终在那 ...
- jquery.form.js mvc 上传文件 layer 选择框与等待效果
HTML <form role="form" id="form1"> <div class="form-group"> ...
- Mina源码研究
目录 1. NioSocketAcceptor初始化源码研究 1.1 类图 1.2 方法调用时序图 1.3 初始化NioSocketAcceptor 1.4 SimpleIoProcessorPool ...