最简单的css实现页面宽度自适应
如果在PC访问,就会显示在一行,如果在手机访问,就会显示为三行。(视手机屏幕的分辨率定)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=0.5,maximum-scale=1,minimum-scale=1,user-scalable=no">
<title>最简单的css实现页面宽度自适应</title>
<style>
div.rxs {
width: %;
height: auto;
} div.rxleft {
width: auto;
float: left;
height: auto;
margin-bottom: ;
margin-top: 10px;
padding-right: 10px;
} hr {
margin-top: 10px;
margin-bottom: ;
border-top: 1px solid #CCC;
}
</style>
</head>
<body> <div class="rxs">
<div class="rxleft">
第一段内容,可以是任何html标签
</div>
<div class="rxleft">
第二段内容,可以是任何html标签
</div>
<div class="rxleft">
第三段内容,可以是任何html标签
</div>
<div style="clear:both"></div>
</div> <hr> </body>
</html>
最简单的css实现页面宽度自适应的更多相关文章
- [转]css实现左侧宽度自适应,右侧固定宽度
原文地址:https://segmentfault.com/a/1190000008411418 页面布局中经常用会遇到左侧宽度自适应,右侧固定宽度,或者左侧宽度固定,右侧自适应.总之就是一边固定宽度 ...
- CSS侧边栏宽度不动(更改页面宽度时),内容区宽度自适应
一个页面,左栏是内容栏content,右栏是侧边栏sidebar.如何使侧边栏宽度不动(更改页面宽度时),内容区宽度自适应呢?为了保证内容区宽度自适应,先不设定其宽度,使其填充整个DIV区域,设定足够 ...
- 移动页面HTML5自适应手机屏幕宽度
标签: 网上关于这方面的文章有很多,重复的东西本文不再赘述,仅提供思路,并解释一些其他文章讲述模糊的地方. 1.使用meta标签,这也是普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的, ...
- 老生长谈:css实现右侧固定宽度,左侧宽度自适应
反过来也可以:左侧宽度固定,右侧自适应.不管是左是右,反正就是一边宽度固定,一边宽度自适应. 这种布局比较常见,博客园很多默认主题就是这种.一般情况下,这种布局中宽度固定的区域是侧边栏,而自适应的区域 ...
- 老生长谈,温故知新:css实现右侧固定宽度,左侧宽度自适应
反过来也可以:左侧宽度固定,右侧自适应.不管是左是右,反正就是一边宽度固定,一边宽度自适应. 这种布局比较常见,博客园很多默认主题就是这种.一般情况下,这种布局中宽度固定的区域是侧边栏,而自适应的区域 ...
- css实现右侧固定宽度,左侧宽度自适应
https://blog.csdn.net/qq_22889599/article/details/78414040 反过来也可以:左侧宽度固定,右侧自适应.不管是左是右,反正就是一边宽度固定,一边宽 ...
- 使用CSS实现三栏自适应布局(两边宽度固定,中间自适应)
来源:http://blog.csdn.net/cinderella_hou/article/details/52156333 所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这道题在今年 ...
- css实现div两列布局——左侧宽度固定,右侧宽度自适应(两种方法)
原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克以 ...
- CSS两列布局——左侧宽度固定,右侧宽度自适应的3种方法
1.左侧绝对定位法 直接看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
随机推荐
- thinkphp3.2 实现点击图片或文字进入内容页
首先要先把页面渲染出来,http://www.mmkb.com/weixiang/index/index.html <div class="main3 mt"> < ...
- jquery.gritter.js简介
Gritter 是一个小型的 jQuery 消息通知插件,通知效果如下图所示: 参考网
- Qt编写的RTSP播放器+视频监控(android版本)
之前写过vlc版本,ffmpeg版本,也在linux上和嵌入式linux上跑过视频监控,这次想直接用ffmpeg的库写个android版本,qt+ffmpeg+android直接用之前的qt+ffmp ...
- 百度前端学院js课堂作业合集+分析(更新中...)
第一课:简陋的登录框 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- 原生js--类、原型、构造函数
1.类和原型:原型对象是类的核心,类的所有实例都从同一个原型上继承属性和方法,原型对象是类的唯一标识 2.类和构造函数:构造函数通过new关键字来创建对象,构造函数的prototype属性被用作新对象 ...
- 题目1442:A sequence of numbers(数列计算以及二分求幂运用)
题目链接:http://ac.jobdu.com/problem.php?pid=1442 详解链接:https://github.com/zpfbuaa/JobduInCPlusPlus 参考代码: ...
- XCode 遇到的问题
俗话说:工欲善其事必先利其器.抛弃了VS,投入XCode的怀抱.先不说两者的差距,还是先熟悉开发工具是关键.下面列出个人使用中遇到的一些问题. Problem1:修改Xcode字体颜色以及调整字体大小 ...
- 微信公众号关联(小游戏 小程序 跳转 盒子 wx.navigateToMiniProgram)
参考: 公众号关联小程序 关联公众号 关联后,登录小游戏,可在设置-关联设置中看到关联的公众号 在小游戏中使用wx.navigateToMiniProgram wx.navigateToMiniPro ...
- REM+SVG Sprite,web app案例
REM+SVG Sprite,构建新时代web app <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN&quo ...
- iOS8新特性(2)——UIPopoverController和UIPresentationController
一.以往使用 UIPopoverController 都是只在iPad上使用 /** * UIPopoverController 只能用于iPad,上,iPhone上使用会崩溃 */ -(void)o ...