Table of Contents
Reply content:
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? ? ?

Jul 06, 2016 pm 01:51 PM
css html html5 javascript php

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

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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
Nordhold: Fusion System, Explained
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
Mandragora: Whispers Of The Witch Tree - How To Unlock The Grappling Hook
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1677
14
PHP Tutorial
1279
29
C# Tutorial
1257
24
What is the significance of the session_start() function? What is the significance of the session_start() function? May 03, 2025 am 12:18 AM

session_start()iscrucialinPHPformanagingusersessions.1)Itinitiatesanewsessionifnoneexists,2)resumesanexistingsession,and3)setsasessioncookieforcontinuityacrossrequests,enablingapplicationslikeuserauthenticationandpersonalizedcontent.

How does deepseek official website achieve the effect of penetrating mouse scroll event? How does deepseek official website achieve the effect of penetrating mouse scroll event? Apr 30, 2025 pm 03:21 PM

How to achieve the effect of mouse scrolling event penetration? When we browse the web, we often encounter some special interaction designs. For example, on deepseek official website, �...

Composer: The Package Manager for PHP Developers Composer: The Package Manager for PHP Developers May 02, 2025 am 12:23 AM

Composer is a dependency management tool for PHP, and manages project dependencies through composer.json file. 1) parse composer.json to obtain dependency information; 2) parse dependencies to form a dependency tree; 3) download and install dependencies from Packagist to the vendor directory; 4) generate composer.lock file to lock the dependency version to ensure team consistency and project maintainability.

PHP performance optimization strategies. PHP performance optimization strategies. May 13, 2025 am 12:06 AM

PHPapplicationscanbeoptimizedforspeedandefficiencyby:1)enablingopcacheinphp.ini,2)usingpreparedstatementswithPDOfordatabasequeries,3)replacingloopswitharray_filterandarray_mapfordataprocessing,4)configuringNginxasareverseproxy,5)implementingcachingwi

How to modify the playback control style of HTML video How to modify the playback control style of HTML video Apr 30, 2025 pm 03:18 PM

The default playback control style of HTML video cannot be modified directly through CSS. 1. Create custom controls using JavaScript. 2. Beautify these controls through CSS. 3. Consider compatibility, user experience and performance, using libraries such as Video.js or Plyr can simplify the process.

H5: Exploring the Latest Version of HTML H5: Exploring the Latest Version of HTML May 03, 2025 am 12:14 AM

HTML5isamajorrevisionoftheHTMLstandardthatrevolutionizeswebdevelopmentbyintroducingnewsemanticelementsandcapabilities.1)ItenhancescodereadabilityandSEOwithelementslike,,,and.2)HTML5enablesricher,interactiveexperienceswithoutplugins,allowingdirectembe

Best Practices for Dependency Injection in PHP Best Practices for Dependency Injection in PHP May 08, 2025 am 12:21 AM

The reason for using Dependency Injection (DI) is that it promotes loose coupling, testability, and maintainability of the code. 1) Use constructor to inject dependencies, 2) Avoid using service locators, 3) Use dependency injection containers to manage dependencies, 4) Improve testability through injecting dependencies, 5) Avoid over-injection dependencies, 6) Consider the impact of DI on performance.

phpMyAdmin's Function: Interacting with MySQL (SQL) phpMyAdmin's Function: Interacting with MySQL (SQL) May 07, 2025 am 12:16 AM

phpMyAdmin simplifies MySQL database management through the web interface. 1) Create databases and tables: Use graphical interface to operate easily. 2) Execute complex queries: such as JOIN query, implemented through SQL editor. 3) Optimization and best practices: including SQL query optimization, index management and data backup.

See all articles