Home > Developer > Web Develop
Learn how to the use of CSS columns to quickly lay out fluid columns that is responsive, degrade gracefully and don ' t require ex TRA markup.
Notes:column-widthOperates like min-width , not width . The browser would render as many columns as it can with the width provided. If Each column can take up more than the value provided, they would do.column-spanEnables a specific element to ignore column-count and column-width . It can is set to a integer to span a certain number of columns, or "all" to span them all. However, this property does not work in Firefox. A workaround could is to move the element (say, a heading) outside of the container with the columns applied to it. That's the It remains outside of the automatic column flow.column-fillAllows the flows into columns. By default, it's set to "balance", where the content is distributed as much as possible between columns. It can also is set to "Auto", but the It requires setting a fixed height. This breaks is the idea of fluid, responsive layouts and so use it with caution. You'll also need some browser prefixes, so being sure to reference thisbrowser support chart.<!DOCTYPE HTML><HTML><Head> <Linkrel= "stylesheet"href= "Styles.css"></Head><Body> < Section> <hclass= "title">News</Div> <nav> <ul> <Li><ahref="#">World</a></Li> <Li><ahref="#">U.S..</a></Li> <Li><ahref="#">Politics</a></Li> <Li><ahref="#">Business</a></Li> <Li><ahref="#">Sports</a></Li> <Li><ahref="#">Health</a></Li> <Li><ahref="#">Tech</a></Li> <Li><ahref="#">Science</a></Li> <Li><ahref="#">Education</a></Li> <Li><ahref="#">Books</a></Li> <Li><ahref="#">Food</a></Li> <Li><ahref="#">Movies</a></Li> <Li><ahref="#">TV</a></Li> <Li><ahref="#">Automobiles</a></Li> <Li><ahref="#">Real Estate</a></Li> <Li><ahref="#">Jobs</a></Li> <Li><ahref="#">Art & Design</a></Li> <Li><ahref="#">Travel</a></Li> <Li><ahref="#">Subscribe</a></Li> <Li><ahref="#">Archives</a></Li> </ul> </nav> </ Section></Body></HTML>
/*Demo only Styles*/* {box-sizing:Border-box;}Body{background:#eee;font-family:' Karla ', Sans-serif;font-size:18px;Font-weight:Bold;} Section{padding:0 2rem;margin:0 Auto;}ul{List-style:None;padding:0;margin:0;}Li{padding:0.5rem 0;}a{padding:2px 5px;Border-radius:3px;Color:#1A4390;}a:hover{text-decoration:None;Background-color:#1A3490;Color:#FFF;}nav{Columns:3 150px;Column-gap:3rem;Column-rule:1px dashed #ccc;Column-fill:Balance;}. Title{Column-span: All;}
[CSS] Introduction to CSS Columns
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
