如果在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. VMware Workstation 14 黑屏的一个解决办法

    近期很多朋友遇到了VMware Workstation 14开启或新建虚拟机后黑屏的现象,同时发现如果挂起虚拟机,可以显示挂起前最后的画面.显然,虚拟机核心是正常工作的,只是“显示”方面出现了问题. ...

  2. 微信-苹果机无法播放声音Audio

    今天同事测试活动的时候,背景音效(多个)苹果机无法发出声音,几个手机都试过,没什么用.不过安卓机上倒是没这个问题,正常. 最开始以为是js冲突问题,将页面上所有的东西进行加处理(清空,一个个加进来), ...

  3. 使用__FILE__和__LINE__定位错误

    #include <stdio.h> int main() { printf("this fake error is in %s on line %d\n", __FI ...

  4. 关于使用Delphi XE10 进行android开发的一些总结

    RAD,可以快速开发出来,但是问题较多最好别用 说实话    做出来的app 太!大!了!  十分的特别的占内存!       FireMonkey 真心太大了...  太占内存了  开发一般应用还可 ...

  5. java基础---->git的使用(一)

    这里面记录一下git的使用,只是平时工作中遇到的一些问题的解决方案,不会涉及到git的一些基础概念及说明.人的天性便是这般凉薄,只要拿更好的来换,一定舍得. Git的一些使用 一.在码云建立好仓库之后 ...

  6. 让A超链接无效的办法 阻止元素发生默认的行为

    $("a").click(function(event){ event.preventDefault(); }); event.preventDefault(); 方法阻止元素发生 ...

  7. 原生js--http请求

    1.终止请求和超时 终止请求XMLHttpRequest对象提供abort方法,调用该方法时触发abort事件 XHR2提供了timeout属性,当超时发生时触发timeout事件.但浏览器尚不支持自 ...

  8. 简单了解如何使用vue-router和vue-resource

    我们先来看看vue-router 1.npm install vue-router --save 2.调用vue-router: 第一种方法: 直接在main.js中调用 import vueRout ...

  9. C# IO流的操作（一）

    C# IO流的操作非常重要,我们读写文件都会使用到这个技术,这里先演示一个文件内容复制的例子,简要说明C#中的IO操作. namespace ConsoleApplication1 { class P ...

  10. 【BZOJ1502】[NOI2005]月下柠檬树 Simpson积分

    [BZOJ1502][NOI2005]月下柠檬树 Description 李哲非常非常喜欢柠檬树,特别是在静静的夜晚,当天空中有一弯明月温柔地照亮地面上的景物时,他必会悠闲地坐在他亲手植下的那棵柠檬树 ...