Home >Backend Development >PHP Tutorial >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
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