最简单的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 ...
随机推荐
- VMware Workstation 14 黑屏的一个解决办法
近期很多朋友遇到了VMware Workstation 14开启或新建虚拟机后黑屏的现象,同时发现如果挂起虚拟机,可以显示挂起前最后的画面.显然,虚拟机核心是正常工作的,只是“显示”方面出现了问题. ...
- 微信-苹果机无法播放声音Audio
今天同事测试活动的时候,背景音效(多个)苹果机无法发出声音,几个手机都试过,没什么用.不过安卓机上倒是没这个问题,正常. 最开始以为是js冲突问题,将页面上所有的东西进行加处理(清空,一个个加进来), ...
- 使用__FILE__和__LINE__定位错误
#include <stdio.h> int main() { printf("this fake error is in %s on line %d\n", __FI ...
- 关于使用Delphi XE10 进行android开发的一些总结
RAD,可以快速开发出来,但是问题较多最好别用 说实话 做出来的app 太!大!了! 十分的特别的占内存! FireMonkey 真心太大了... 太占内存了 开发一般应用还可 ...
- java基础---->git的使用(一)
这里面记录一下git的使用,只是平时工作中遇到的一些问题的解决方案,不会涉及到git的一些基础概念及说明.人的天性便是这般凉薄,只要拿更好的来换,一定舍得. Git的一些使用 一.在码云建立好仓库之后 ...
- 让A超链接无效的办法 阻止元素发生默认的行为
$("a").click(function(event){ event.preventDefault(); }); event.preventDefault(); 方法阻止元素发生 ...
- 原生js--http请求
1.终止请求和超时 终止请求XMLHttpRequest对象提供abort方法,调用该方法时触发abort事件 XHR2提供了timeout属性,当超时发生时触发timeout事件.但浏览器尚不支持自 ...
- 简单了解如何使用vue-router和vue-resource
我们先来看看vue-router 1.npm install vue-router --save 2.调用vue-router: 第一种方法: 直接在main.js中调用 import vueRout ...
- C# IO流的操作(一)
C# IO流的操作非常重要,我们读写文件都会使用到这个技术,这里先演示一个文件内容复制的例子,简要说明C#中的IO操作. namespace ConsoleApplication1 { class P ...
- 【BZOJ1502】[NOI2005]月下柠檬树 Simpson积分
[BZOJ1502][NOI2005]月下柠檬树 Description 李哲非常非常喜欢柠檬树,特别是在静静的夜晚,当天空中有一弯明月温柔地照亮地面上的景物时,他必会悠闲地坐在他亲手植下的那棵柠檬树 ...