html中div自适应代码,CSS+DIV自适应布局
CSS+DIV自适应布局
1.两列布局(左右两侧,左侧固定宽度200px;右侧自适应占满)
代码如下:
左右两侧,左侧固定宽度200px;右侧自适应占满
.box{
width:800px;
height:300px;
margin:0 auto;
}
.left{
width:200px;
height:300px;
background:#f00;
float:left;
}
.right{
height:300px;
margin-left:200px;
background:#0f0;
}
运行结果如下图:
两栏布局(左定宽,右自动)
float + margin
2.三列布局(左中右三列,左右200px固定,中间自适应占满)
方法一(左右浮动,中间 margin-left,margin-right,中间div在最后)
代码如下
左中右三列,左右200px固定,中间自适应占满 方法一
.box{
width:800px;
height:300px;
margin:0 auto;
}
.left{
width:200px;
height:300px;
background:#f00;
float:left;
}
.right{
width:200px;
height:300px;
float:right;
background:#0f0;
}
.center{
height:300px;
background-color:#00f;
margin:0 200px;
}
运行结果如下图
方法二(左中右定位):
代码如下
左中右三列,左右200px固定,中间自适应占满 方法二
.box{
width:1000px;
height:300px;
margin:0 auto;
position:relative;
}
.left{
width:200px;
height:300px;
background:#f00;
position:absolute;
top:0px;
left:0px;
}
.right{
width:200px;
height:300px;
background:#0f0;
position:absolute;
top:0px;
right:0px;
}
.center{
height:300px;
background-color:#00f;
position:absolute;
left:200px;
right:200px;
}
运行结果如下图:
3.上中下三行,头部,底部固定高200px,中间自适应占满
中间定位,底部定位
代码如下:
上中下三行,头部,底部固定高200px,中间自适应占满
*{
margin:0;
}
html{
height:100%;
}
body{
min-height:100%;
}
.header{
width:100%;
height:100px;
background-color:#ccc;
}
.main{
width:100%;
background-color:#f00;
position:absolute;
top:100px;
bottom:100px;
}
.footer{
height:100px;
width:100%;
position:absolute;
bottom:0px;
background-color:#ccc;
}
运行代码如下图:
4.上下两部分,地下这个股东高度200px,如果上面的内容少,那么这个footer就固定在底部,如果内容多,就把footer往下挤
代码如下:
上下两部分,地下这个股东高度200px,如果上面的内容少,
那么这个footer就固定在底部,如果内容多,就把footer往下挤
*{
margin:0;
}
html{
height:100%;
}
body{
min-height:100%;
background-color:#00f;
position:relative;
}
.header{
height:100%;
background-color:#00f;
padding-bottom:200px;
}
.footer{
width:100%;
height:200px;
position:absolute;
bottom:0px;
background-color:#0ff;
}
sdsadas
sdsadas
sdsadas
sdsadas
sdsadas
sdsadas
sdsadas
sdsadas
sdsadas
sdsadas
sdsadas
sdsadas
sdsadas
运行结果如下图:
新手入门,请多多关照
html中div自适应代码,CSS+DIV自适应布局相关推荐
- html图片自动在div里放大,css图片自适应div大小怎么做
css图片自适应div大小怎么做 内容导读:css图片自适应div大小的控制,为了让图片能够更好的展示,建议使用max-width这个属性.不管是pc端还是移动端,或者是自适应网站,使用max-wid ...
- html中隐藏溢出怎么写,html溢出隐藏代码 css+div 溢出隐藏 无效
css+div 溢出隐藏 无效 隐藏图片超出div部分代码如何写的? 把图片作为div的背景图片是最容易实现你所要的效果的方式: 如果一定要用img标签那就要css和js结合才能实现了: 请html代 ...
- 在php中页面布局 3列左右侧固定中间自适应居中,css三列布局--两边固定中间自适应和中间固定两边自适应...
三列布局 本篇讲三列布局,面试常考题,自己总结的,如有什么问题,欢迎指出!我会用红色标注出主要作用部分,都是最精简的写法,,没有多余的修饰. 布局方式一:两边固定中间自适应 1.flex布局 思路:将 ...
- css自适应图片样式,css怎么让图片自适应?css图片自适应大小的方法介绍
对于一个网页来说,有一张好看又清晰的背景图片是非常吸引人的,但是并不是每张图片都是有相同的大小,所以就需要晒西安图片的自适应,那么,css怎么让图片自适应呢?本篇文章将来介绍关于css图片自适应大小的 ...
- html中字段间距代码,css调字体大小代码 css字与字之间的间距怎么调
html怎么改变字体大小和颜色 可以用css改变字体的大小和颜色. 在head标签中添加style标签给页面设置css样式,选择p标签,字体大小用的是"font-size"属 在D ...
- php自适应浏览器,css如何自适应浏览器
css自适应浏览器的设置方法:首先打开相应的代码文件:然后使用js代码" jQuery(window).resize(function(){...}"实现内容自适应浏览器宽度或者高 ...
- css将div变为块,css+div 浮动分块
前段时间学过几天html,只是怀着了解的态度,能够读懂别人的页面,能够扒现成就行,一直没有自己动手去实践过,其实也不是没有实践过,前段时间扒了一个网页,想按照自己的要求来改,可后果是越改越乱.今天心血 ...
- 图片广告自适应代码html,使用自适应模板网站添加广告自适应的方法(DIV+CSS控制)...
现在随着HTM5+CSS3越来越流行,自适应站点也越来越多,但是自适应站点会遇到一个问题,添加的广告不会自适应,添加了PC端的广告后,使用手机浏览,会发现广告严重变形或者显示不全或者根本不显示,今天就 ...
- html中dl块自适应高度,CSS高度自适应代码(用了都说好)
body { font-family: 宋体,Arial,serif; font-size: 12px; COLOR: #333333; margin:0 auto; padding:0; backg ...
最新文章
- 《大道至简》第四章内容总结
- 文件查找-locate find 学习笔记
- C# 委托和事件 (三)
- 递归,递推,记忆化搜索,空间优化(数字三角形)
- 查找在Git中删除文件的时间
- Java中内存泄漏八种情况的总结
- 基于R语言时间序列的平稳时间序列模型预测
- LaTeX入门——如何独立排版出一篇期刊论文
- 「大话webpack」从零搭建
- php exec 命令,概述PHP命令行shell_exec()使用
- Towards Enhancing Fine-grained Details for Image Matting
- 苹果公司的电脑产品及其历史
- 【计算机毕业设计】123网上商城系统设计与实现
- 合肥长鑫芯片服务器,进军DDR5/GDDR6/LPDDR5内存 合肥长鑫计划第三代10nm工艺
- Linux 指令学习之ping
- 《OpenDRIVE1.6规格文档》3
- CNC+CRC/SoftPLC/OpenCASCADE/CAD/CAM 开源项目汇总
- C++ opencv imread读不进来图片
- TortoiseGit小乌龟的基本操作
- 监控视频压缩2—Block-Composed Background Reference for High Efficiency Video Coding