1

Agora a pouco resolvi dá uma olhada no Materialize e tentei utilizar o elemento card. Só que não consigo entender porque eles não ficam organizados na horizontal!

    <div class="container">
      <div class="section">


        <div class="row">
         <div class="col s12 m4">
           <div class="card">
             <div class="card-image">
               <img src="images/sample-1.jpg">
               <span class="card-title">Card Title</span>
             </div>
             <div class="card-content">
               <p>I am a very simple card. I am good at containing small bits of information.
               I am convenient because I require little markup to use effectively.</p>
             </div>
             <div class="card-action">
               <a href="#">This is a link</a>
             </div>
           </div>
         </div>
       </div>

       <div class="row">
        <div class="col s12 m4">
          <div class="card">
            <div class="card-image">
              <img src="images/sample-1.jpg">
              <span class="card-title">Card Title</span>
            </div>
            <div class="card-content">
              <p>I am a very simple card. I am good at containing small bits of information.
              I am convenient because I require little markup to use effectively.</p>
            </div>
            <div class="card-action">
              <a href="#">This is a link</a>
            </div>
          </div>
        </div>
      </div>

      <div class="row">
       <div class="col s12 m4">
         <div class="card">
           <div class="card-image">
             <img src="images/sample-1.jpg">
             <span class="card-title">Card Title</span>
           </div>
           <div class="card-content">
             <p>I am a very simple card. I am good at containing small bits of information.
             I am convenient because I require little markup to use effectively.</p>
           </div>
           <div class="card-action">
             <a href="#">This is a link</a>
           </div>
         </div>
       </div>
     </div>


   </div>
  </div>

Tirei um print:inserir a descrição da imagem aqui

2 Respostas 2

1

O problema é que você separou os card's em rows, para que funcione basta adicionar todos dentro da mesma class row e usar a class col para colocar um lado a lado.

Lembre-se sempre do sistema de grid:

A row é linha e col a colunas.

Segue o jsfiddle.

3
  • Puts...fui ver isso agora. Passou despercebido legal. Valeu! Commented 8/04/2016 às 19:00
  • 1
    @augustoppimenta, lembre-se sempre do sistema de grid. rows é linha e os cols são colunas :)
    – Brunno
    Commented 8/04/2016 às 19:01
  • 1
    Pois é @Brunno, dei uma viajada grande. Muito obrigado pela ajuda. :D Commented 8/04/2016 às 19:04
1

Eles não estão alinhados por que você está separando eles por uma row.

Olhe meu exemplo: deixando os 3 dentro de uma única row eles ficam perfeitamente alinhados

Codepen: http://codepen.io/anon/pen/XdVyPL

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .