如果在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. shell截取字符串的一些简单方法

    一.使用${} 1.${var##*/}该命令的作用是去掉变量var从左边算起的最后一个'/'字符及其左边的内容,返回从左边算起的最后一个'/'(不含该字符)的右边的内容.使用例子及结果如下:

  2. RAC迁移至单机考虑几大因素

    数据库迁移几大因素 1. 停机时间 2. 源端,目标端 操作系统平台,版本,对应的数据库版本 3. 数据量 4. 外界因素,存储空间,网络等

  3. Docker制作私有的基础镜像

    debootstrap是debian/ubuntu下的一个工具,用来构建一套基本的系统(根文件系统).生成的目录符合Linux文件系统标准(FHS),即包含了/boot./etc./bin./usr等 ...

  4. JDBC 连接数据库，包含连接池

    1.不使用连接池方式(Jdbc) 1.1 工具类(JdbcUtil.java) package com.jdbc.util; import java.io.IOException;import jav ...

  5. 兵器簿之cocoaPods的安装和使用

    以前添加第三方库的时候总是直接去Github下载然后引入,但是如果这些第三方库发生了更新,我们还需要手动去更新项目,所以现在引入之前一直想弄都一直没有弄的cocoaPods,现在演示一把过程 其实非常 ...

  6. Spark2 SQL configuration参数配置

    查看当前环境SQL参数的配置 spark.sql("SET -v") key value spark.sql.hive.version 1.2.1 spark.sql.source ...

  7. 关于Django的序列化

    阅读目录 Django支持的序列化格式 Django的序列化 Django支持的序列化格式 1 2 3 4 Identifier Information xml Serializes to and f ...

  8. 微信 获取wx.config 参数 基类

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...

  9. java后台设计简单的json数据接口，设置可跨域访问，前端ajax获取json数据

    在开发的过程中,有时候我们需要设计一个数据接口.有时候呢,数据接口和Web服务器又不在一起,所以就有跨域访问的问题. 第一步:简单的设计一个数据接口. 数据接口,听起来高大上,其实呢就是一个简单的Se ...

  10. 推荐系统之最小二乘法ALS的Spark实现

    1.ALS算法流程: 初始化数据集和Spark环境----> 切分测试机和检验集------> 训练ALS模型------------> 验证结果-----------------& ...