css布局多列等高
css
.content{margin:0 auto;width: 600px;border: 3px solid #00c;overflow: hidden;}
.left{float: left;width: 150px;background-color: #b0b0b0;padding-bottom: 2000px;margin-bottom:-2000px;}
.right{float: left;width: 450px;background-color: #6cc;padding-bottom: 2000px;margin-bottom:-2000px;}
html
<div class="content">
<div class="left">
左边
<br />
<br />
<br />
内容
</div> <div class="right">
右边
<br />
<br />
<br />
<br />
内容
</div>
</div>
css布局多列等高的更多相关文章
- css设置多列等高布局
初始时,多个列内容大小不同,高度不同.现在需要设置不同的背景来显示,而且各个列的高度需要保持一致.那么这就需要利用到多列等高布局. 最终需要的效果: 1. 真实等高布局 flex 技术点:弹性盒子布局 ...
- css布局--两列布局,左侧固定,右侧自适应(其中左侧要可以拖动,右侧水平滚动条)
(css布局所要实现的效果) 在前端面试中经常会被问到CSS布局,两列布局,左侧固定,右侧自适应.前几天去面试,遇到了这道题的升级版,要求左侧可拖动,右侧要有水平滚动条.拿到题目确实有些大脑短路,不知 ...
- 前端应该掌握的CSS实现多列等高布局
1.引言 我们在写页面的时候,有的时候会遇到多栏布局,每个栏目里面的内容有的时候可能不一样,这样就会导致每个栏目实际的高度也是不一样的,如果每个栏目有背景颜色的,就会导致每个栏目的底部是对不齐的,用户 ...
- [CSS布局]3列布局:左右两列固定宽度、中间列自适应满宽
一种常见的3列布局,左右两列固定宽度.中间列自适应满宽.整个网页不出现横向滚动条 纯CSS实现 效果图: 代码: <!DOCTYPE html> <html lang="e ...
- 纯css实现两列等高
<!doctype html> <html> <head> <meta /> <title>Title</title> < ...
- css布局之三列布局
网站上使用三列布局的还是比较多的,不过三列和两列有些相似: 1.自适应三列 <!DOCTYPE html> <html lang="en"> <hea ...
- css布局之一列布局
在我们浏览网页中经常看见一列布局其实一列布局就是 一般的一列布局的都是固定宽度的 body{margin:0;padding:0} .main{width:800px;height:300px;bac ...
- CSS布局 两列布局之单列定宽,单列自适应布局思路
前言 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.比如斗鱼的直播间,后台管理系统都是常用的 我们将从 float, inline-block, table, absolute, fl ...
- 如何用纯CSS布局两列,一列固定宽度,另一列自适应?
大家都知道好多网站都是左右布局的,很多公司在笔试和面试环节也常常问这个问题.一个去网易的师兄说14年腾讯面试的时候问过这个问题,网易在笔试和面试时候也问过这个问题,还有很多互联网公司也都涉及到这个问题 ...
随机推荐
- Swift (if while)
Swift 分支 if if后的括号可以省略 if后只能接bool值 if后的大括号不能省略 let num1 = 3.0 let num2 = 4.0 let bool : Bool = true ...
- 控制器View的加载和内存警告流程图
控制器View的加载 内存警告
- 使用xmarks同步 chrome ie firefox safari书签
xmarks是什么? Install Xmarks on each computer you use, and it seamlessly integrates with your web brows ...
- Palo(OLAP database)–MOLAP
本地安装:D:\Program Files (x86)\Jedox Palo-Server https://www.openhub.net/p/p4155 维基百科:https://en.wiki ...
- 开源游戏 “Elvish Bird”
简介: 这个游戏是我在今年(2014/03)课余时闲着无聊做的一个冒险类小游戏,总共花了5个工作日才完成,为了游戏的效率,做了很多优化,目前在IE8以上浏览器能够流畅运行,运行时如果屏幕分辨率不兼容, ...
- Java基础知识学习(六)
多线程 先了解线程的概念 多线程需要注意的地方 优先级.线程同步.消息传递.数据共享.死锁等 Java线程类 Thread,实现接口 Runnable Thread常用方法 getName 获得线程名 ...
- ORACLE TO_CHAR函数格式化数字的出现空格的原因
在这篇博客SQL挑战--如何高效生成编码里面我由于需要将数字格式化为字符,像12需要格式化0012这样的字符,所以使用了TO_CHAR(数字,'0000')这样的写法,后面0000表示缺省补零,测试过 ...
- 挖一挖C#中那些我们不常用的东西之系列(4)——GetHashCode,ExpandoObject
这篇继续分享下GetHashCode和ExpandoObject这两个比较好玩的方法. 一:GetHashCode 从MSDN上可以看到的解释是:用作特定类型的哈希函数,也就是说任何对象的实例都会有一 ...
- Java高级编程之URL处理
Java URL处理 URL(Uniform Resource Locator)中文名为统一资源定位符,有时也被俗称为网页地址.表示为互联网上的资源,如网页或者FTP地址. 本章节我们将介绍Java是 ...
- 理解 OpenStack Swift (1):OpenStack + 三节点Swift 集群+ HAProxy + UCARP 安装和配置
本系列文章着重学习和研究OpenStack Swift,包括环境搭建.原理.架构.监控和性能等. (1)OpenStack + 三节点Swift 集群+ HAProxy + UCARP 安装和配置 ( ...