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>
|
<<: Implementing timed page refresh or redirect based on meta
>>: DHCP Configuration Tutorial in CentOS7 Environment
Recommend
Example of how to implement embedded table with vue+elementUI
During my internship in my senior year, I encount...
How to use shell scripts in node
background During development, we may need some s...
Analysis of the Principle of MySQL Index Length Limit
This article mainly introduces the analysis of th...
JS ES new features: Introduction to extension operators
1. Spread Operator The spread operator is three d...
Which is faster among MySQL full-text index, joint index, like query, and json query?
Table of contents Query Background 1. Like query ...
Linux confirms that the data disk has been uninstalled and a new custom image can be created
Custom Image FAQ How to view the data disk? You c...
MYSQL5.6.33 database master/slave (Master/Slave) synchronization installation and configuration details (Master-Linux Slave-windows7)
1. Installation environment Here is also a record...
Solve the problem of Navicat for Mysql connection error 1251 (connection failed)
Because what I wrote before was not detailed enou...
ThingJS particle effects to achieve rain and snow effects with one click
Table of contents 1. Particle Effects 2. Load the...
Sample code for generating QR code using js
Some time ago, the project needed to develop the ...
Sharing some wonderful uses of wxs files in WeChat applet
Table of contents Preface application Filters Dra...
11 Reasons Why Bootstrap Is So Popular
Preface Bootstrap, the most popular front-end dev...
How to design MySQL statistical data tables
Table of contents Is real-time update required? M...
Example code for css3 to achieve scroll bar beautification effect
The specific code is as follows: /*Scroll bar wid...
Basic operation tutorial of files and permissions in centos
Preface Before we begin, we should briefly unders...