正padding负margin实现多列等高布局(转)
转自: 巧妙运用CSS中的负值 (http://www.webhek.com/post/2345qwerqwer.html)
代码来自: https://codepen.io/Chokcoco/pen/ZgrmVy
好像存在了很久的css技巧, 可惜自己缺没听过, 真是井底之蛙了. 记得以前用过js来实现, 惭愧啊.

<!-- <h2>padding + margin + overflow,实现多列等高效果,兼容性好</h2> -->
<h2></h2>
<div class="g-padmar">
<div class="g-left">
左侧布局内容<br/>
</div>
<div class="g-right">
右侧布局内容<br/>
右侧布局内容<br/>
右侧布局内容<br/>
右侧布局内容<br/>
</div>
</div>
h2 {
text-align: center;
line-height: 60px;
height: 60px;
font-size: 20px;
background: #00bcd4;
color: #fff;
}
.g-container {
line-height:;
color: #fff;
}
.g-padmar {
position: relative;
overflow: hidden;
}
.g-padmar .g-left {
float: left;
width: 200px;
background: #4caf50;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
.g-padmar .g-right {
width: 100%;
margin-left: 200px;
background: #99afe0;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
正padding负margin实现多列等高布局(转)的更多相关文章
- css设置多列等高布局
初始时,多个列内容大小不同,高度不同.现在需要设置不同的背景来显示,而且各个列的高度需要保持一致.那么这就需要利用到多列等高布局. 最终需要的效果: 1. 真实等高布局 flex 技术点:弹性盒子布局 ...
- 纯css实现div三列等高布局的最简单方法简化版/也可以多列
使用正padding和负margin对冲实现多列布局方法 这种方法很简单,就是在所有列中使用正的上.下padding和负的上.下margin,并在所有列外面加上一个容器,并设置overflow:hid ...
- CSS3中flexbox如何实现水平垂直居中和三列等高布局
最近这些天都在弥补css以及css3的基础知识,在打开网页的时候,发现了火狐默认首页上有这样一个东西.
- CSS技巧 (2) · 多列等高布局
前言 最近,面试的时候都碰到一些关于利用CSS实现多列等高布局或者一侧宽度固定,另一侧宽度自适应的问题,下面稍微总结一下: 先看一道题目 巧妙的多列等高布局 规定下面的布局,实现多列等高布局,要求两 ...
- css两列等高布局
布局方案 等高布局有几种不同的方法,但目前为止我认为浏览器兼容最好最简便的应该是padding补偿法.首先把列的padding-bottom设为一个足够大的值,再把列的margin-bottom设一个 ...
- 两列等高布局 padding+margin的负值 CSS布局奇淫技巧之-多列等高
代码: 效果图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/ ...
- 前端应该掌握的CSS实现多列等高布局
1.引言 我们在写页面的时候,有的时候会遇到多栏布局,每个栏目里面的内容有的时候可能不一样,这样就会导致每个栏目实际的高度也是不一样的,如果每个栏目有背景颜色的,就会导致每个栏目的底部是对不齐的,用户 ...
- 实现多列等高布局_flex布局
详情参见此篇博客 http://www.w3cplus.com/css/creaet-equal-height-columns 建议掌握方法四.五 其实,利用最新的flex布局 http://www. ...
- 利用jQuery进行三行两列等高布局
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- ActiveMQ之三--JMS-Spring和ActiveMQ整合的完整实
这篇博文,我们基于Spring+JMS+ActiveMQ+Tomcat,做一个Spring4.1.0和ActiveMQ5.11.1整合实例,实现了Point-To-Point的异步队列消息和PUB/S ...
- [译]使用Pandas读取大型Excel文件
上周我参加了dataisbeautiful subreddit上的Dataviz Battle,我们不得不从TSA声明数据集创建可视化.我喜欢这种比赛,因为大多数时候你最终都会学习很多有用的东西. 这 ...
- POJ 2584 T-Shirt Gumbo 二分图的多重匹配
题目链接:http://poj.org/problem?id=2584 题目大意:有SMLXT五种T恤型号,有N个人,每个人有一个可选的型号区间,你现在要发给N个人每人一条他可以选择的型号的T恤,问能 ...
- ubuntu18.04安装flat-remix-gnome主题
flat-remix-gnome主题的github地址:https://github.com/daniruiz/flat-remix-gnome ubuntu下进行如下操作: sudo add-apt ...
- css代码陷阱
1.选择器优先级 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- MYSQL 递归操作
MYSQL 递归? ===================== 表: t_node node_id int node_name varchar2(45) parent_id int 级, ...
- 09点睛Spring MVC4.1-异步请求处理(包含兼容浏览器的服务器端推送)
转发地址:https://www.iteye.com/blog/wiselyman-2215852 9.1 异步请求处理 Servlet 3开始支持异步请求处理 Spring MVC 3.2开始支持S ...
- 【Chrome插件】Session Buddy--搁置标签页
写在前面:看文章前请先看文章写作时间,避免浪费时间.2019-09-10 使用场景 Chrome打开许多网页,临时有事需要把当前的一些标签页一键保存,等待事后继续处理. 操作演示 原片地址:https ...
- virtualenv虚拟环境搭建及pipreqs自动生成第三方模块简介
阅读目录 virtualenv简介 含义: 为何要用虚拟环境: virtualenv安装和使用 pipreqs模块的介绍和使用 回到顶部 virtualenv简介 回到顶部 含义: virtual:虚 ...
- linux ubuntu 网卡配置---固定IP
需要修改/etc/network/interfaces和/etc/resolvconf/resolv.conf.d/base两个文件. 1) /etc/network/interfaces文件: 首先 ...