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

This article mainly shows you "how to achieve horizontal scrolling layout in css", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to achieve horizontal scrolling layout in css" this article.

Float + two-tier DOM implementation

Html

one

two

three

Css

.container {

Width: 200px

Overflow: hidden

}

/ * float:left * /

.div1 {

Overflow: hidden

Width: 700px

}

.div1 > div {

Width: 200px

Float:left

Margin-left: 10px

Background: green

Border:1px solid red

}

Display:inline-block + two-tier DOM implementation

one

two

three

Css

/ * display: inline-block * /

.div2 {

Overflow: hidden

Width: 700px

}

.div2 > div {

Width: 200px

Display: inline-block

Border: 1px solid green

}

White-sapce:nowrap reduces DOM by one layer

Html

one

two

three

Css

/ * white-sapce: nowrap can reduce one layer of DOM*/

.div3 {

White-space: nowrap

Overflow: hidden

}

.div3 > div {

Width: 200px

Display: inline-block

Border: 1px solid blue

}

The above is all the content of the article "how to achieve horizontal scrolling layout in css". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.