Analysis and application of irregular picture waterfall flow principle

The layout problem of irregular picture walls encountered in the project is analyzed as follows:

1.img display: block; solve the 3px img tag bug

2. Set the height and width of img. Otherwise, the image below will appear. If the image above is loaded first, the image will be pushed down when it is loaded again.

3. Parent div position: relative; allows the image price to be relatively and absolutely positioned

4. Child span position: absolute; right: 5px; bottom: 5px; Let the price be absolutely positioned in the parent div

5. To achieve the effect, put the image div into a 3-column div

The effect is as follows:

Copy code

The code is as follows:

<div id=”main”></p> <p> <div class=”g1”></p> <p> <div class=”item”></p> <p> <img src=”” width=”” height=””/></p> <p> <span>Price</span></p> <p> </div></p> <p> …..</p> <p> </div></p> <p> <div class=”g2”></p> <p> </div></p> <p> <div class=”g3”></p> <p> </div></p> <p></div>

Solve the problem of Access denied for user 'root'@'%' to database 'xxx' after creating a database in MySQL

Blog

Analysis and application of irregular picture waterfall flow principle

Explanation of the usage scenarios of sql and various nosql databases

In-depth understanding of MySQL slow query log

Example verification MySQL | update field with the same value will record binlog

Things to note when designing web pages for small-screen mobile devices

Solve the problem of Access denied for user 'root'@'%' to database 'xxx' after creating a database in MySQL

Use xshell to connect to the Linux server

Solution for adding iptables firewall policy to MySQL service

Vue implements student management function

Detailed explanation of the usage of scoped slots in Vue.js slots

A brief discussion on the correct posture of Tomcat memory configuration

Recommend

Detailed installation process and basic usage of MySQL under Windows

mysql add, delete, modify and query basic statements

JS implements multiple tab switching carousel

Analysis of the process of configuring a simple network environment based on Tcl language

SQL Optimization Tutorial: IN and RANGE Queries

CSS3 speeds up and delays transitions

Using HTML web page examples to explain the meaning of the head area code

JavaScript canvas Tetris game

Example of Vue's implementation of the underlying code for simulating responsive principles

Html sample code for reading and displaying pictures in a local folder

Solution to the problem that MySQL in Windows system cannot input and display Chinese

More than 300 lines of CSS code to achieve the explosive special effects of WeChat 8.0

MySQL 5.7.17 installation and configuration method graphic tutorial (windows10)

In MySQL database, datetime, bigint, and timestamp are used to represent time selection. Which one is the most efficient for storing time?

Implementation of adding remark information to mysql