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年腾讯面试的时候问过这个问题,网易在笔试和面试时候也问过这个问题,还有很多互联网公司也都涉及到这个问题 ...
随机推荐
- Android每次运行项目时重新启动一个新的模拟器的解决办法
具体解决办法 1.打开任务管理器,结束adb进程 2.此时android console下面会出现错误信息 3.切换到dos下面运行: adb start-server 4.重新运行android项目 ...
- 如何把自己的MaC本变成一台服务器
Mac本Xcode10.9以后都默认安装阿帕奇服务器的,所以我们只需要找到他进行配置就可以了 下面看具体操作命令 vim编辑器命令 1.打开apache服务器,sudo apachectl start ...
- windows7 下伪静态配置方法
今天终于算是彻底知道windows7下伪静态的IIS配置了.尼玛真坑爹,竟然64位的和32位的配置竟然不一样... 网上找的比较详细的文章地址: http://jingyan.baidu.com/ar ...
- Team Leader炖完石头汤后干嘛
在万众创业的互联网年代,挖人组建全明星团队过于奢侈.面对水平参差不齐的团队咋办? 命运真是捉弄,半年前在大美团打工时准备做个NABC的教学项目 ,结果自己就被挖到"Competitors 竞 ...
- 在查询时将查询条件放入Session中,导出时直接根据qpniRGaFiler取查询条件即可
在查询时将查询条件放入Session中,导出时直接根据qpniRGaFiler取查询条件即可
- IO流05--毕向东JAVA基础教程视频学习笔记
Day20 10 创建java文件列表11 Properties简述12 Properties存取13 Properties存取配置文件14 Properties练习15 PrintWriter16 ...
- Javascript之旅——第二站:对象和数组
一觉睡到中午,本来准备起来洗洗继续睡,不过想想没辙,还得继续这个系列,走过变量的第一站,第二站我们再来看看对象和数组. 一:对象 说起对象,我们不自然就想起了面向对象中自封装的一个类,同样JS中也 ...
- PL/SQL远程备份和恢复Oracle数据库
(转自:http://blog.csdn.net/huchunfu/article/details/25165901) 在客户端远程备份的文件保存在数据库所在主机上,不会直接拷贝到客户端.—————— ...
- Nginx中文手册
Nginx 常见应用技术指南[Nginx Tips] 第二版 作者:NetSeek http://www.linuxtone.org (IT运维专家网|集群架构|性能调优) 目 录 一. Nginx ...
- HTML的基本代码第一课
打开DREAMWEAVER,新建HTML,如下图: 其中body的属性: bgcolor---页面背景颜色 text--文字颜色 topmargin--上页边距 leftmargin--左叶边距 ri ...