用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 EBS AR 收款取值
select hr.name, a.autoapply_flag, a.AUTOMATCH_SET_ID, a.LEGAL_ENTITY_ID, a.RECEIPT_NUMBER, a.type, a ...
- 配置nginx官网yum源
由于yum源中没有我们想要的nginx,那么我们就需要创建一个“/etc/yum.repos.d/nginx.repo”的文件,其实就是新增一个yum源 二.添加nginx.repo 文件: [roo ...
- Linux cal命令详解
cal 显示指定月份的日历 常见命令参数 NAME cal - displays a calendar SYNOPSIS cal [-smjy13] [[[day] month] year] DESC ...
- Maven构建时跳过部分测试
当遇到以下场景: 其他人写的单元测试影响统计结果 一些需要调用外部接口的测试暂不运行 需要在非本机环境上运行一些不回滚的单元测试 则有必要选择以下方法跳过部分测试. 在测试用例前加上注解 @Ignor ...
- November 30th 2016 Week 49th Wednesday
Your attitude, not your aptitude, will determine your altitude. 决定你人生高度的,不是你的才能,而是你的态度. Basically, I ...
- Java补充内容
在第一个Java程序中已经提到一些基本的知识点,这里再补充几点. 1. 成员变量和局部变量的区别 成员变量:成员变量定义在类中,默认初始值为0,定义时可以不初始化,在整个类中可见. 局部变量:局部 ...
- 人工智能——搜索(1)回溯策略【N皇后问题】
这学期学<人工智能>(马少平,朱小燕 编著)这本书,里面很多算法听老师讲都听不懂,就想试试写一下看看能不能写出来,就从最简单的回溯策略开始吧. 源码 题目描述 在一个n*n的国际象棋棋盘上 ...
- U-Mail:多方面因素避免EDM邮件进垃圾箱
有很多做邮件营销的企业客户给U-Mail来电或来函咨询一件困扰他们的事:群发邮件时,要怎么样才能降低被收件人列入垃圾邮件的概率呢?其实关于这个问题,U-Mail小编已经请资深营销专家解答过多次了,经常 ...
- Eclipse Debug Daemon Thread
Daemon Thread ["http-bio-8080"-exec-2] (Suspended (exception RuntimeException)) ThreadPool ...
- JPA规范实现
JPA全称Java Persistence API.JPA通过JDK 5.0注解或XML描述对象-关系表的映射关系,并将运行期的实体对象持久化到数据库中. JPA 是 JCP定义的一种规范,要使用此规 ...