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
What you need to know about filters in Vue
Table of contents Preface What is a filter How to...
CSS XTHML writing standards and common problems summary (page optimization)
Project Documentation Directory Div+CSS Naming Sta...
Summary of commonly used commands for docker competition submission
Log in to your account export DOCKER_REGISTRY=reg...
Vue Virtual DOM Quick Start
Table of contents Virtual DOM What is virtual dom...
Docker Nginx container production and deployment implementation method
Quick Start 1. Find the nginx image on Docker Hub...
Detailed explanation of the principle of Vue monitoring data
Table of contents 1. Introduction II. Monitoring ...
JS function call, apply and bind super detailed method
Table of contents JS function call, apply and bin...
js, css, html determine the various versions of the browser
Use regular expressions to determine the IE browse...
A brief analysis of the responsiveness principle and differences of Vue2.0/3.0
Preface Since vue3.0 was officially launched, man...
Image scrolling effect made with CSS3
Achieve resultsImplementation Code html <base ...
How to install common components (mysql, redis) in Docker
Docker installs mysql docker search mysql Search ...
A great collection of web standards learning resources
These specifications are designed to allow for bac...
A practical record of restoring a MySQL Slave library
Description of the situation: Today, I logged int...
Element uses scripts to automatically build new components
Table of contents background How does element-ui&...
HTML+CSS3 code to realize the animation effect of the solar system planets
Make an animation of the eight planets in the sol...