Align Framework Cards Materialize

Asked

Viewed 2,534 times

1

Just now I decided to take a look at Materialize and tried to use the card element. I just can’t understand why they’re not organized horizontally!

    <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>

I took a print:inserir a descrição da imagem aqui

html css materialize

2 answers

1


The problem is that you’ve separated the cards into Rows, so it works just by adding them all within the same class row and use the class col to place one side by side.

Always remember the grid system:

To row is line and col to columns.

Follows the jsfiddle.

  • Puts...went to see it now. Went unnoticed cool. Thanks!

  • 1

    @augustoppimenta, always remember the grid system. Rows is line and cols are columns :)

  • 1

    Because it’s @Brunno, I gave a great traveler. Thank you so much for your help. D

1

They are not aligned because you are separating them by a Row.

Look at my example: leaving the 3 inside a single Row they are perfectly aligned

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

Browser other questions tagged html css materialize

You are not signed in. Login or sign up in order to post.