首頁 > 後端開發 > php教程 > javascript - 如何在手机上的HTML如何排版成如下格式???

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

WBOY
發布: 2016-07-06 13:51:46
原創
1071 人瀏覽過

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

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板