Home  >  Article  >  Backend Development  >  javascript - 如何在手机上的HTML如何排版成如下格式???

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

WBOY
WBOYOriginal
2016-07-06 13:51:461019browse

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

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

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn