Maison >développement back-end >tutoriel php >javascript - 如何在手机上的HTML如何排版成如下格式???

javascript - 如何在手机上的HTML如何排版成如下格式???

WBOY
WBOYoriginal
2016-07-06 13:51:461082parcourir

javascript - 如何在手机上的HTML如何排版成如下格式???

javascript - 如何在手机上的HTML如何排版成如下格式???

这种两行数据都是从数据库一个数组取出的,HTML如何写啊???本人小白求大神指导

回复内容:

javascript - 如何在手机上的HTML如何排版成如下格式???

javascript - 如何在手机上的HTML如何排版成如下格式???

这种两行数据都是从数据库一个数组取出的,HTML如何写啊???本人小白求大神指导

建议去了解一下CSS3的Flex布局
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

Bootstrap中的解决方案

1.移动端的话建议用flex布局,新旧语法一起用,兼容性没啥问题
2.display:inline-block;width:50%;这个会有空格问题,要把父元素的font-size设为0
3.不建议用浮动,因为如果不定高的话,当两边高度不同时布局会乱

用bootstrap吧,能实现你需要的响应式布局,http://www.runoob.com/bootstrap/bootstrap-tutorial.html。
不过更建议你用Webapp框架,跟你说几个常见的Webapp框架吧:
1、jQuery Mobile:学习成本低,效率低,跨浏览器兼容性最好;
2、Zepto:Zepto就是一个jQuery的轻量级替代品,效率比jQuery高,有jQuery的缺点;
3、ionic:基于AngularJs做的,学习成本高,效率高;
4、Sencha Touch:是世界上第一个支持 HTML5 和 CSS3 标准的移动应用框架

float:left;width:50%

float:left;width:50%

每一块给宽度50% 让后浮动,要注意设置box-size 为border-box

谢谢大家的帮助,我会去试试的,做不出来再来问大家

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn