接触h5已经有快一年了，因为一直偏向页面重构所以在页面布局方面也算是经历过风风雨雨。所以总结一下自己用过的方法来比较归纳

首先来说，H5的页面一般分为两种，一种是用来做市场营销的，主要特征是图多，页面较花哨图片较多，一种是功能页，功能页顾名思义主要职能还是功能一般也是分为两种：展示类和填写类。今天主要说一下功能页的填写类页面

填写类的页面一般会涉及三个部分：页面标题，form表单以及提交按钮

页面标题&form表单

其实页面标题和form表单一样，一般的布局是左中右，即主页-标题-返回等等，当然也有就只有标题的，这种就不做过多的介绍，下面主要说一下三栏布局

三栏布局实现起来的难点其实不在于如何一栏放三个元素也不在于如何让三个元素按照 靠左、 居中、靠右的方式排列，而是如果中间的一栏如果是一个input框，如何让这个input框可以充满中间部分

为什么要这么说呢

如果只是要三个元素都排在一起这个是很简单的，我可以都float，之后清除浮动就可以了。但是一旦都float起来，元素的宽度就变成了包含元素内容的宽度，即便是让其display:block依然不能挽回

然后这个时候，我们的重点要登场了，对，flex，这个flex是个好东西实现了伸缩布局。什么叫做伸缩布局？就拿我们的三个元素横排来说，我们的首项和尾项其实宽度是固定的，但是我们的中间项我们希望他可以充满中间的位置

这个就是我们说的伸缩布局。而且，这样一来不仅横向还有纵向，比如我们的表单下方是个提交按钮，我们希望它一直都在屏幕下方，但是表单又不会长度那么刚好那怎么办呢？对，用我们的flex,什么position:fixed/absolute在flex 面前简直就是歪门邪道。不过这个flex也不是省油的灯，前后出了三版应该是，我现在用的是第二版即display:box搭配flex:1,加完浏览器前缀兼容性可谓什么妖魔鬼怪什么美女画皮什么刀枪火海什么阴谋诡计都挡不住我的flex的如意棒 遣送bug朝西去，抱歉有点high，总之就是好用的不得了；但是鉴于时代在发展，社会在进步，没准哪天第二版会被完全淘汰，还是第二版（display:box）与第三版(display:flex)结合写方是上策。

flex如何使用百度一下你就知道，只强调一下不管是纵向还是横向伸缩，请确保伸缩对象的父容器伸缩的范围是100%,即height:100%/width:100%,尤其是纵向布局需要把heml,body均height:100%才能奏效哦~

好，接下来说一下我今天新发现的一种布局方式，前方高能，注意把控好你的情绪，表太激动哦~

先来代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>使用table-cell</title>
  6.     <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"/>
  7.     <style>
  8.         body {
  9.             background-color: #80ff80;
  10.             padding: 0;
  11.             margin: 0;
  12.         }
  13.         .child {
  14.             display: table-cell;
  15.             vertical-align: middle;
  16.             word-wrap: break-word;
  17.             word-break: break-all;
  18.             white-space: nowrap;
  19.         }
  20.  
  21.         .container {
  22.             padding: 10px 15px;
  23.             display: block;
  24.             background-color: #fff;
  25.             border-bottom: 1px solid #eee;
  26.         }
  27.  
  28.         .middle {
  29.             width: 10000px;
  30.         }
  31.  
  32.     </style>
  33. </head>
  34. <body>
  35.     <article>
  36.         <div class="container">
  37.             <div class="child">icon</div>
  38.             <div class="child  middle">
  39.                 <p>标题文字</p>
  40.             </div>
  41.             <div class="child">
  42.                 <p>
  43.                     说明文字
  44.                 </p>
  45.  
  46.             </div>
  47.         </div>
  48.  
  49.     </article>
  50.  
  51. </body>
  52. </html>

　　对，就是table-cell；父元素不用搞那么磨磨唧唧，直接就子元素table-cell；中间的元素给一个看似实现不了的较大的一个宽度；要注意子元素们一定要写不换行的css，不然最右边的元素会竖直显示就像在table布局中一样，无论怎么挤，只要宽度可以包含那就都给你放里面，实在。所以为了保证右边的元素横向显示的逼格，让他不能换行就美丽新世界了~

　　嗯，此处应该有掌声~

　　因为还有别的开发任务先就写这一个点，其他布局会找时间再更新，客官你莫急哦~

关于H5填写信息类页面横向布局总结的更多相关文章

  1. win8效果的横向布局

    有一个月没写过博客了,自己的博客也没有看过,前段时间一直在忙着写代码,公司有一个制漆的产品,与传统纵向布局不一样,要求页面横向布局,类似win8的那种布局效果,最开始,我也没有什么头绪,然后硬着头皮做 ...

  2. Html.java 存储页面信息类

    Html.java 存储页面信息类 package com.iteye.injavawetrust.miner; /** * 存储页面信息类 * @author InJavaWeTrust * */ ...

  3. 超详细的php用户注册页面填写信息完整实例（附源码）

    这篇文章主要介绍了一个超详细的php用户注册页面填写信息完整实例,内容包括邮箱自动匹配.密码强度验证以及防止表单重复等,小编特别喜欢这篇文章,推荐给大家. 注册页面是大多数网站必备的页面,所以很有必要 ...

  4. H5 页面 rem 布局适配方法

    rem 布局适配方案 主要方法为: 按照设计稿与设备宽度的比例,动态计算并设置 html 根标签的 font-size 大小: css 中,设计稿元素的宽.高.相对位置等取值,按照同等比例换算为 re ...

  5. 谈谈iOS开发如何写个人中心这类页面--静态tableView页面的编写

    本文来自 网易云社区 . 一.本文讲的是什么问题? 在开发 iOS 应用时,基本都会遇到个人中心.设置.详情信息等页面,这里截取了某应用的详情编辑页面和个人中心页面,如下: 我们以页面结构的角度考虑这 ...

  6. Bootstrap~页面的布局

    回到目录 Bootstrap作为支持响应式布局的一个前端插件,确实发挥着重要的作用,无论你是在手机,平板还是PC上浏览网页,都能达到不错的效果,这一切一切,都是bootstrap带给我们的! 今天主要 ...

  7. HTML 页面源代码布局介绍

    http://www.cnblogs.com/polk6/archive/2013/05/10/3071451.html 此介绍以google首页源代码截图为例: 从上到下依次介绍: 1.<!D ...

  8. cl查看类的内存布局

    查看单个类的内存布局 Microsoft Visual Studio编译器cl的编译选项可以查看源文件中某个C++类的内存布局,对于想了解某个对象的内存布局的人来说十分直观和方便. • 命令格式    ...

  9. [CPP] 类的内存布局

    本文可以解决下面 3 个问题: 以不同方式继承之后,类的成员变量是如何分布的? 虚函数表及虚函数表指针,在可执行文件中的位置? 单一继承.多继承.虚拟继承之后,类的虚函数表的内容是如何变化的? 在这里 ...

随机推荐

  1. 【Python网络爬虫二】使用urllib2抓去网页内容

    在Python中通过导入urllib2组件,来完成网页的抓取工作.在python3.x中被改为urllib.request. 爬取具体的过程类似于使用程序模拟IE浏览器的功能,把URL作为HTTP请求 ...

  2. java后台对前端输入的特殊字符进行转义

    转自:http://www.cnblogs.com/yangzhilong/p/5667165.html java后台对前端输入的特殊字符进行转义 HTML: 常见的帮助类有2个:一个是spring的 ...

  3. shiro session计算timeout

    /** * Determines if this session is expired. * * @return true if the specified session has expired, ...

  4. [PHP][REDIS]phpredis 'RedisException' with message 'read error on connection'

    最近一个后台常驻job通过redis的brpop阻塞读取消息时,设置了永不超时 while( $re=$redis->brPop($queue_name,0) ){ } 但是在实际的使用中发现很 ...

  5. VC++ 设置软件开机自启动的方法

    0  概述 软件开机自启动是比较常用的做法,设置方法也有好几种. 1  使用者模式 在"开始菜单"的所有程序中有个"启动"文件夹,可以将需要设置为开机启动的应用 ...

  6. WEB 用户指南 -- WEB 系统结构文档

    本文描述了如何使用 WEB语言 编程.同时还包含了 WEAVE 和 TANGLE 程序的说明文档. WEB 程序 可以读取 WEB 文件,然后输出 TeX 文档 和 Pascal 程序. 使用 WEB ...

  7. php中通过DOM操作XML

    DOM文档在js里早就接触过,知道DOM不但可以操作html文档,还可以操作XHTML,XML等文档,有着极强的通用性,下面我们通过两个小例子,看看在PHP中是如何用DOM操作XML文档的,和js中差 ...

  8. ifconfig: command not found 如何解决？

    ifconfig: command not found 查看path配置(echo相当于c中的printf,C#中的Console.WriteLine) 1 echo $PATH 解决方案1:先看看是 ...

  9. VS 2013编译64位版本QT 4.8.6及使用cmake为依赖QT生成VS项目时Could NOT find Qt4

    对于一些已经解决的问题,本博客不再讨论.只将本人遇到的问题做简单的说明. 一.VS 2013编译64位版本QT 4.8.6 QT项目官网中,对于QT4,其只提供了windows X86的版本,并且支持 ...

  10. git push　报错！！！！

    [root@NB sh]# git push To git@x0.xx.xxx.x1:yanjing_chenl/IT-DOC.git ! [rejected] master -> master ...