Search code examples
htmlcssmaterialize

how to put div next to each other properly in css?

I have 6 cards div showing in rows using Materialize library. But for some reason I cannot make the cards something like this, shown below: x x x x x x So, can anyone help me make it work, am I stuck with the materialize css or can I override it? thanks for the help. All I need to put is 3 divs on top and the other 3 under. So, 2 rows.

here is my code:

    <div class="row">
    <div class="col s12 m7">
      <div class="card">
        <div class="card-image">
     <img src="https://img.icons8.com/wired/64/000000/enter-2.png">
          <!-- <span class="card-title">Check In</span> -->
        </div>
        <div class="card-content">
          <p>Check In  </p>
        </div>
        <div class="card-action">
          <a href="#">Check In</a>
        </div>
      </div>
    </div>
  </div>

<div class="row">
  <div class="col s12 m7">
    <div class="card">
      <div class="card-image">
<img src="https://img.icons8.com/ios/50/000000/greek-pillar.png">
  </div>
      <div class="card-content">
        <p>Expand your opportunities</p>
      </div>
      <div class="card-action">
        <a href="#">View Pillars</a>
      </div>
    </div>
  </div>
</div>



<div class="row">
  <div class="col s12 m7">
    <div class="card">
      <div class="card-image">
        <img src="https://img.icons8.com/ios/50/000000/chat-message.png">
  </div>
      <div class="card-content">
        <p>Chat  </p>
      </div>
      <div class="card-action">
        <a href="#">Start Chat</a>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col s12 m7">
    <div class="card">
      <div class="card-image">
<img src="https://img.icons8.com/ios-filled/50/000000/search.png">
    </div>
      <div class="card-content">
        <p>Find plenty of resources.</p>
      </div>
      <div class="card-action">
        <a href="#">View Resources</a>
      </div>
    </div>
  </div>
</div>


<!-- gallery -->
<div class="row">
  <div class="col s12 m7">
    <div class="card">
      <div class="card-image">
<img src="https://img.icons8.com/dotty/50/000000/gallery.png">
</div>
      <div class="card-content">
        <p>Gallery of events</p>
      </div>
      <div class="card-action">
        <a href="#">View Gallery</a>
      </div>
    </div>
  </div>
</div>


<div class="row">
  <div class="col s12 m7">
    <div class="card">
      <div class="card-image">
<img src="https://img.icons8.com/ios/50/000000/easel.png">
</div>
      <div class="card-content">
        <p>VAPA</p>
      </div>
      <div class="card-action">
        <a href="#">View VAPA</a>
      </div>
    </div>
  </div>
</div>

CSS:

    .card{
  width: 50%;
}

.card .card-image {
  width: 20%;
}
.row {
  display: flex;
  flex-direction: column;
}
Solution

  • I hope this what u r expecting:

    use col s12 m4 class.

    <div class="row">
  <div class="col s12 m4">
  </div>

  <div class="col s12 m4">
  </div>

  <div class="col s12 m4">
  </div>
</div>

<div class="row">
  <div class="col s12 m4">
  </div>
  <!-- gallery -->
  <div class="col s12 m4">
  </div>

  <div class="col s12 m4">
  </div>
</div>


    <!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<div class="row">
  <div class="col s12 m4">
    <div class="card">
      <div class="card-image">
        <img src="https://img.icons8.com/wired/64/000000/enter-2.png">
        <!-- <span class="card-title">Check In</span> -->
      </div>
      <div class="card-content">
        <p>Check In </p>
      </div>
      <div class="card-action">
        <a href="#">Check In</a>
      </div>
    </div>
  </div>

  <div class="col s12 m4">
    <div class="card">
      <div class="card-image">
        <img src="https://img.icons8.com/ios/50/000000/greek-pillar.png">
      </div>
      <div class="card-content">
        <p>Expand your opportunities</p>
      </div>
      <div class="card-action">
        <a href="#">View Pillars</a>
      </div>
    </div>
  </div>



  <div class="col s12 m4">
    <div class="card">
      <div class="card-image">
        <img src="https://img.icons8.com/ios/50/000000/chat-message.png">
      </div>
      <div class="card-content">
        <p>Chat </p>
      </div>
      <div class="card-action">
        <a href="#">Start Chat</a>
      </div>
    </div>
  </div>
</div>

<div class="row">

  <div class="col s12 m4">
    <div class="card">
      <div class="card-image">
        <img src="https://img.icons8.com/ios-filled/50/000000/search.png">
      </div>
      <div class="card-content">
        <p>Find plenty of resources.</p>
      </div>
      <div class="card-action">
        <a href="#">View Resources</a>
      </div>
    </div>
  </div>


  <!-- gallery -->
  <div class="col s12 m4">
    <div class="card">
      <div class="card-image">
        <img src="https://img.icons8.com/dotty/50/000000/gallery.png">
      </div>
      <div class="card-content">
        <p>Gallery of events</p>
      </div>
      <div class="card-action">
        <a href="#">View Gallery</a>
      </div>
    </div>
  </div>


  <div class="col s12 m4">
    <div class="card">
      <div class="card-image">
        <img src="https://img.icons8.com/ios/50/000000/easel.png">
      </div>
      <div class="card-content">
        <p>VAPA</p>
      </div>
      <div class="card-action">
        <a href="#">View VAPA</a>
      </div>
    </div>
  </div>
</div>