如果在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实现页面宽度自适应的更多相关文章

  1. [转]css实现左侧宽度自适应,右侧固定宽度

    原文地址:https://segmentfault.com/a/1190000008411418 页面布局中经常用会遇到左侧宽度自适应,右侧固定宽度,或者左侧宽度固定,右侧自适应.总之就是一边固定宽度 ...

  2. CSS侧边栏宽度不动(更改页面宽度时),内容区宽度自适应

    一个页面,左栏是内容栏content,右栏是侧边栏sidebar.如何使侧边栏宽度不动(更改页面宽度时),内容区宽度自适应呢?为了保证内容区宽度自适应,先不设定其宽度,使其填充整个DIV区域,设定足够 ...

  3. 移动页面HTML5自适应手机屏幕宽度

    标签: 网上关于这方面的文章有很多,重复的东西本文不再赘述,仅提供思路,并解释一些其他文章讲述模糊的地方. 1.使用meta标签,这也是普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的, ...

  4. 老生长谈:css实现右侧固定宽度,左侧宽度自适应

    反过来也可以:左侧宽度固定,右侧自适应.不管是左是右,反正就是一边宽度固定,一边宽度自适应. 这种布局比较常见,博客园很多默认主题就是这种.一般情况下,这种布局中宽度固定的区域是侧边栏,而自适应的区域 ...

  5. 老生长谈,温故知新:css实现右侧固定宽度,左侧宽度自适应

    反过来也可以:左侧宽度固定,右侧自适应.不管是左是右,反正就是一边宽度固定,一边宽度自适应. 这种布局比较常见,博客园很多默认主题就是这种.一般情况下,这种布局中宽度固定的区域是侧边栏,而自适应的区域 ...

  6. css实现右侧固定宽度,左侧宽度自适应

    https://blog.csdn.net/qq_22889599/article/details/78414040 反过来也可以:左侧宽度固定,右侧自适应.不管是左是右,反正就是一边宽度固定,一边宽 ...

  7. 使用CSS实现三栏自适应布局(两边宽度固定,中间自适应)

    来源:http://blog.csdn.net/cinderella_hou/article/details/52156333 所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这道题在今年 ...

  8. css实现div两列布局——左侧宽度固定,右侧宽度自适应(两种方法)

    原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克以 ...

  9. CSS两列布局——左侧宽度固定,右侧宽度自适应的3种方法

    1.左侧绝对定位法 直接看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

随机推荐

  1. thinkphp3.2 实现点击图片或文字进入内容页

    首先要先把页面渲染出来,http://www.mmkb.com/weixiang/index/index.html <div class="main3 mt"> < ...

  2. jquery.gritter.js简介

    Gritter 是一个小型的 jQuery 消息通知插件,通知效果如下图所示: 参考网

  3. Qt编写的RTSP播放器+视频监控(android版本)

    之前写过vlc版本,ffmpeg版本,也在linux上和嵌入式linux上跑过视频监控,这次想直接用ffmpeg的库写个android版本,qt+ffmpeg+android直接用之前的qt+ffmp ...

  4. 百度前端学院js课堂作业合集+分析(更新中...)

    第一课:简陋的登录框 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  5. 原生js--类、原型、构造函数

    1.类和原型:原型对象是类的核心,类的所有实例都从同一个原型上继承属性和方法,原型对象是类的唯一标识 2.类和构造函数:构造函数通过new关键字来创建对象,构造函数的prototype属性被用作新对象 ...

  6. 题目1442:A sequence of numbers(数列计算以及二分求幂运用)

    题目链接:http://ac.jobdu.com/problem.php?pid=1442 详解链接:https://github.com/zpfbuaa/JobduInCPlusPlus 参考代码: ...

  7. XCode 遇到的问题

    俗话说:工欲善其事必先利其器.抛弃了VS,投入XCode的怀抱.先不说两者的差距,还是先熟悉开发工具是关键.下面列出个人使用中遇到的一些问题. Problem1:修改Xcode字体颜色以及调整字体大小 ...

  8. 微信公众号关联(小游戏 小程序 跳转 盒子 wx.navigateToMiniProgram)

    参考: 公众号关联小程序 关联公众号 关联后,登录小游戏,可在设置-关联设置中看到关联的公众号 在小游戏中使用wx.navigateToMiniProgram wx.navigateToMiniPro ...

  9. REM+SVG Sprite,web app案例

    REM+SVG Sprite,构建新时代web app <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN&quo ...

  10. iOS8新特性(2)——UIPopoverController和UIPresentationController

    一.以往使用 UIPopoverController 都是只在iPad上使用 /** * UIPopoverController 只能用于iPad,上,iPhone上使用会崩溃 */ -(void)o ...