用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"> ...
随机推荐
- 回归JavaScript基础(四)
主题:JavaScript变量.作用域和内存问题 JavaScript的变量和别的语言比起来是与众不同的.说道变量,不得不谈他的作用域.同很多语言一样,JavaScript开发者也不用担心开发中内存的 ...
- EBS请求定义成菜单
1. 将请求定义为“功能”路径:系统管理员 –应用产品-函数输入自定义的功能名称,用户功能名以及说明 “特性”TAB页: 类型选择“表单”,其余两个字段默认:在表单TAB页: 表单字段:选择“运行 ...
- 如何快速开发一个支持高效、高并发的分布式ID生成器
ID生成器是指能产生不重复ID服务的程序,在后台开发过程中,尤其是分布式服务.微服务程序开发过程中,经常会用到,例如,为用户的每个请求产生一个唯一ID.为每个消息产生一个ID等等,ID生成器也是进行无 ...
- python下载指定的版本包
首先我们很多时候在执行pip的时候是不行的 有时候很难成功,这个时候我们就要想其他的版本了 一.是不是这个包需要指定版本, 比如python2的和mysql链接的是,而python3则是mysqlc ...
- [翻译] SCRecorder
SCRecorder https://github.com/rFlex/SCRecorder An easy Vine/Instagram like video and/or audio record ...
- zendstudio 默认网页打开your project的时候不显示本地主机localhost的解决方法
修改wamp配置文件c:\\wamp64\wampmanager.conf 修改为如下选项即可 默认这个选项是off关闭的,打开即可. urlAddLocalhost = "on" ...
- 一份非常完整的 MySQL 规范
源自:https://www.cnblogs.com/huchong/p/10219318.html 一.数据库命令规范 所有数据库对象名称必须使用小写字母并用下划线分割. 所有数据库对象名称禁止使用 ...
- 【matlab】 QR分解 求矩阵的特征值
"QR_H.m" function [Q,R] = QR_tao(A) %输入矩阵A %输出正交矩阵Q和上三角矩阵R [n,n]=size(A); E = eye(n); X = ...
- Js 运算符(加减乘除)
1.加法 + +NaN //NaN,有一个为NaN就为NaN var box=Infinity+Infinity //Infinity var box=-Infinity + -Infinity // ...
- nodejs API(一)
不要注重版本 URL 官网所在位置:https://nodejs.org/dist/latest-v8.x/docs/api/url.html URL网址解析的好帮手: url有三个可调用的方法:ur ...