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 Article Tags

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)

PHP 8.4 Installation and Upgrade guide for Ubuntu and Debian PHP 8.4 Installation and Upgrade guide for Ubuntu and Debian Dec 24, 2024 pm 04:42 PM

PHP 8.4 Installation and Upgrade guide for Ubuntu and Debian

CakePHP Date and Time CakePHP Date and Time Sep 10, 2024 pm 05:27 PM

CakePHP Date and Time

CakePHP Project Configuration CakePHP Project Configuration Sep 10, 2024 pm 05:25 PM

CakePHP Project Configuration

CakePHP File upload CakePHP File upload Sep 10, 2024 pm 05:27 PM

CakePHP File upload

CakePHP Routing CakePHP Routing Sep 10, 2024 pm 05:25 PM

CakePHP Routing

Discuss CakePHP Discuss CakePHP Sep 10, 2024 pm 05:28 PM

Discuss CakePHP

CakePHP Quick Guide CakePHP Quick Guide Sep 10, 2024 pm 05:27 PM

CakePHP Quick Guide

How To Set Up Visual Studio Code (VS Code) for PHP Development How To Set Up Visual Studio Code (VS Code) for PHP Development Dec 20, 2024 am 11:31 AM

How To Set Up Visual Studio Code (VS Code) for PHP Development

See all articles