Home > Backend Development > PHP Tutorial > javascript - How to format HTML on a mobile phone into the following format? ? ?

javascript - How to format HTML on a mobile phone into the following format? ? ?

WBOY
Release: 2016-07-06 13:51:46
Original
1078 people have browsed it

javascript - How to format HTML on a mobile phone into the following format? ? ?

javascript - How to format HTML on a mobile phone into the following format? ? ?

These two rows of data are taken out from an array in the database. How to write HTML? ? ? I'm a novice and I'm asking for guidance

Reply content:

javascript - How to format HTML on a mobile phone into the following format? ? ?

javascript - How to format HTML on a mobile phone into the following format? ? ?

These two rows of data are taken out from an array in the database. How to write HTML? ? ? I'm a novice and I'm asking for guidance

It is recommended to learn about the Flex layout of CSS3
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

Solution in Bootstrap

1. For the mobile terminal, it is recommended to use flex layout. Use the old and new syntax together. There is no problem with compatibility
2.display:inline-block;width:50%; This will have space problems, so you need to change the parent element's Set font-size to 0
3. It is not recommended to use floating, because if the height is not set, the layout will be chaotic when the heights of both sides are different

Use bootstrap to achieve the responsive layout you need, http://www.runoob.com/bootstrap/bootstrap-tutorial.html.
However, it is more recommended that you use the Webapp framework. Let me tell you a few common Webapp frameworks:
1. jQuery Mobile: low learning cost, low efficiency, best cross-browser compatibility;
2. Zepto: Zepto is a lightweight alternative to jQuery, which is more efficient than jQuery but has the shortcomings of jQuery;
3. ionic: based on AngularJs, with high learning cost and high efficiency;
4. Sencha Touch: It is the world’s first mobile application framework that supports HTML5 and CSS3 standards

float:left;width:50%

float:left;width:50%

Give 50% of the width of each block and allow it to float. Please pay attention to setting the box-size to border-box

Thank you for your help. I will try it. If it doesn’t work, I will ask you again

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template