用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"> ...
随机推荐
- PowerShell小技巧 算术表达式求值
前几天要统计一个组虚拟机使用的硬盘容量,只希望得到一个大概的值,计算的值截图如下: 写成算术表达式的话大概是:60 * 3 + 80 * 2 + 90 * 3 + 120 * 6 + 140 * 2 ...
- 向服务器post或者get数据返回
#region 向服务器端Get值返回 /// <summary> /// 向服务器端Get返回 /// </summary> ///<see cref="Au ...
- robotFramework--ride 问题:Data source does not exist.
第一次安装robotFramework,运行时提示Data source does not exist.最后发现是在Arguments这一栏误输入了. 导致的,去掉.后就可以正常运行了.
- git遇到问题
简介 这里记录git使用过程中所涉及的问题,记录下解决方案. git 本地项目上传远程仓库[github] 已在远程建好仓库,在本地项目根目录下 $ git init $ git add . $ gi ...
- 浅谈 JSONP
说起跨域的解决方案,总是会说到 JSONP,但是很多时候都没有仔细去了解过 JSONP,可能是因为现在 JSONP 用的不是很多(多数时候都是配置响应头实现跨域),也可能是因为用 JSONP 的场景一 ...
- 常见dos命令(win7下测试)
按下组合键:win + R ,输入cmd进入Dos. 1. cls :清屏命令. 2. ver :查看系统版本号命令,winver弹出一个窗口显示更详细的系统版本号. 3. dir 无参数 : ...
- HAproxy.md
HAProxy HAProxy是什么 HAProxy(High Available Proxy)是基于四层和七层的高可用负载均衡代理服务器,配置简单.支持多达上万条并发请求. HAProxy工作原理 ...
- python第十五课——全局变量and局部变量
全局变量&局部变量: 全局变量的特点: 1).直接定义在.py文件中(函数外)的变量(全局位置) 2).作用域比较大,可以被此文件中的任何函数所使用 局部变量的特点:1).定义在函数内部(函数 ...
- 超链接<a>标签用法
1.a标签点击事件 1>1a href="javascript:js_method();" 这是我们平台上常用的方法,但是这种方法在传递this等参数的时候很容易出问题,而且 ...
- 2018年1月12日--微信小程序----出错报告(40kb的原因)---并解决方法
一. 报错的原因是因为,图片的文件太大了,已经超过了40kb...不能超过40kb. 在这里查看图片文件的大小: