New here? Create an account
 
 Log in automatically

Kết quả cho từ khoá ""

Hangouts

Rise of the Argonauts

Inspired by G+ | Legion of Damned

Back to Top

  • Please feel free to contact us if you have any question.
    Thank you for your time!
  • Your donation will help us maintain this site

Top posters



You are not connected. Please login or register

View previous topicPrevious | NextView next topicReply to topic

Go down Message [Page 1 of 1]

1 default CSS3 Multi-column layout on Tue Dec 05, 2017 1:08 am

avatar

Admin
avatar

Admin

Cover Image :  gcover_photo

Posts :  10

Coins :  2147485236

Reputation :  10

Gender :  Male


Character
Nation: Alethius Alethius
Level:
1/99  (1/99)


Founder

Founder
Multi-column layout

W3C offers a new way to arrange text “news-paper wise”, in columns. Multi-column layoutis actually a module on its own. It allows a webdeveloper to let text be fitted into columns, in two ways: by defining a width for each column, or by defining a number of columns. The first would be done by column-width, the latter by column-count. To create a space between the columns, you need to specify a width for column-gap. Multi-column layout is currently only supported in Mozilla based browsers and Safari 3, who have prefixed the properties with respectively -moz- and -webkit-. The example below is done with column-width, the CSS for it is as follows: -moz-column-width: 13em; -webkit-column-width: 13em; -moz-column-gap: 1em; -webkit-column-gap: 1em; Which results in the following: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean egestas blandit ipsum. Morbi nulla metus, luctus et, ullamcorper sit amet, commodo quis, nisl. Ut blandit lacus nec nibh. Phasellus eleifend enim et risus. Nam condimentum. Praesent euismod auctor dui. Nunc ut leo vel magna adipiscing tempor. Donec pretium, ligula et hendrerit faucibus, sem velit accumsan tortor, sodales tempor est ligula non velit. Nulla sagittis, odio quis porta nonummy, mauris arcu gravida odio, quis aliquam lacus elit non libero. Proin aliquam augue accumsan augue. Quisque ut eros at erat ultrices sodales. Nunc vitae ipsum. Mauris in elit in dolor imperdiet interdum. Vivamus egestas sagittis justo. Sed lorem. Sed vel neque in ipsum gravida nonummy. Nulla tempor blandit elit. The next example is done with column-count, and has the following code: -moz-column-count: 3; -moz-column-gap: 1em; -moz-column-rule: 1px solid black; -webkit-column-count: 3; -webkit-column-gap: 1em; -webkit-column-rule: 1px solid black; Which in turn results in the following: Cras urna metus, aliquam sed, condimentum eget, pellentesque scelerisque, massa. Nullam et est id augue blandit tincidunt. Ut consectetuer, justo eleifend varius facilisis, tortor lorem pharetra nunc, ac sodales purus nunc semper tortor. Integer nec urna. Praesent scelerisque, ipsum nec aliquet volutpat, sem ante sagittis risus, sed condimentum magna libero luctus elit. Donec pede purus, hendrerit non, laoreet vel, porta ut, neque. Cras eu lacus. Pellentesque tempus mattis magna. Nullam id nisl. Quisque dolor lorem, commodo ac, pharetra sed, nonummy nec, nulla. Mauris purus. Suspendisse eget mauris nec justo eleifend vestibulum. Nunc ut eros sed pede pretium congue. Etiam in elit ut nisi ultrices hendrerit. Cras vulputate ultrices quam. Curabitur venenatis. Cras sed nisi. A feature which isn’t implemented yet is column-space-distribution, this should describe how to distribute the space between the columns if there’s rest space left. Jason Harrop has created a multicolumn extension for Firefox which allows you to apply these CSS properties to whatever page you like. Other pages about multi-column layout: A List Apart: Introducing the CSS3 Multi-Column Module Mozilla Developer Center: CSS3 Columns

2 default Re: CSS3 Multi-column layout on Tue Dec 05, 2017 6:22 am

avatar

Admin
avatar

Admin

Cover Image :  gcover_photo

Posts :  10

Coins :  2147485236

Reputation :  10

Gender :  Male


Character
Nation: Alethius Alethius
Level:
1/99  (1/99)


Founder

Founder
Oh GOD WHY

Permissions in this forum:
You can reply to topics in this forum