Como colocar o conteúdo em colunas com CSS

Quarta-feira, 28 de Setembro de 2011 | Criado à 235 dias atrás | 2 Comentários
Categorias: Blog, Truque e Dicas, Tutoriais, WordPress | Tags: , Dicas, Tutoriais, WordPress

Muito se fala de como colocar o conteúdo do blog em colunas e existem vários exemplos, alguns não são compatíveis com alguns temas WordPress e outros não são compatíveis com alguns Browsers.

Aqui está uma maneira muito fácil para deixar o conteúdo do seu blog em colunas.

Neste exemplo vamos usar 3 colunas usando para isso as classes e CSS.

Para colocar o conteúdo em 3 colunas você necessita de colocar o seguinte código no seu ficheiro style.css.

1
2
3
4
5
6

.three-col {
       -moz-column-count: 3;
       -moz-column-gap: 20px;
       -webkit-column-count: 3;
       -webkit-column-gap: 20px;
}

Adicionado o código agora você precisa de indicar qual a parte do texto que quer colocar em colunas para isso usa-se a classe “three-col”.

Veja como colocar o texto:

1

<p class="three-col">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>

Exemplo:

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

Note que a altura de cada coluna é auto-equilibrado, conforme a especificação.

Além disso, observe esta demo e código de exemplo está usando moz e prefixos fornecedor webkit, só deve trabalhar no Browsers Gecko (Firefox 1.5 +) E Webkit (Safari 3 +, Chrome). Não há(ainda) suporte nativo no Internet Explorer ou Opera.

Veja todas as propriedades que pode utilizar

1
2
3
4
5
6
7
8
9
10
11
12

.three-col {
       -moz-column-count: 3;
       -moz-column-gap: 20px;
       -webkit-column-count: 3;
       -webkit-column-gap : 20px;
       -moz-column-rule-color:  #ccc;
       -moz-column-rule-style:  solid;
       -moz-column-rule-width:  1px;
       -webkit-column-rule-color:  #ccc;
       -webkit-column-rule-style: solid ;
       -webkit-column-rule-width:  1px;
}

Simples e fácil de implementar.

Artigos recomendados:

1. Como colocar automaticamente o conteúdo em colunas no WordPress
2. Como colocar a data do WordPress em Português
3. Como colocar uma caixa de autor no final de cada artigo
4. Como adicionar um botão “Gosto” do Facebook no seu blog WordPress
5. Como criar um pin site no Windows 7 com o Internet Explorer 9

Autor: Bruno Veiga

Webmaster do NoDesignToday e mais alguns Sites, Blogs e Lojas Online. Dedica o seu tempo como Webmaster, Blogger e WebDesigner. Adora a Internet e tudo o que poderá estar relacionado com Design.

Bruno Veiga escreveu 73 artigos para o NoDesignToday.

<< Voltar ao Blog Discuta este artigo