Shulou(Shulou.com)06/03 Report--

This article introduces the knowledge of "how to insert N pictures in a row in a fixed-size DIV layer". In the operation of practical cases, many people will encounter such a dilemma. Next, let the editor lead you to learn how to deal with these situations! I hope you can read it carefully and be able to achieve something!

How to insert more than N pictures in a fixed-size DIV layer, so that they are arranged in one line, and sliders appear when they exceed the width of the layer?

I thought it would be possible to use the overflow property, but the test failed. Later, the effect was achieved by using div cascading.

HTML Code:

The code is as follows:

Css controls the style:

The code is as follows:

.div {

Width:400px

Height:200px

Overflow-y:hidden; / * only horizontal scroll bars appear * /

Position: absolute

}

.div1 {

Position:absolute

Z-index:1

}

.div2 {

Position:absolute

Z-index:5

Left:200px

Top:0px

}

.div3 {

Position:absolute

Z-index:10

Left:400px

Top:0px

}

Effect:

This is the end of the content of "how to insert N pictures in a row in a fixed size DIV layer". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.