Search code examples
cssmaterialize

materialize css adjacent div same width

How can I make adjacent col divs in the same row at equal heights and responsive using google materialize css, I want to make a facebook like place where to add pictures & images,

my CSS and HTML is below:

.topSpace{
  margin-top: 0.75rem;
}

.drop{
  margin: 0.75rem !important;
  padding: 0.5rem !important;
  background-color: rgb(248, 246, 244);
}

.dashed {
  border: 3px dashed rgba(219, 211, 193, 0.74);
  border-radius: 10px;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

 <div class="row drop dashed">
    <div class="col s6 m4 l3 topSpace red">
      <div class="center-align valign-wrapper">
        <img class="responsive-img" src="http://via.placeholder.com/150x250">
      </div>
    </div>
    
    <div class="col s6 m4 l3 topSpace red">
      <div class="center-align valign-wrapper">
        <img class="responsive-img" src="http://via.placeholder.com/150x250">
      </div>
    </div>

    <div class="col s6 m4 l3 topSpace green">
      <div class="center-align valign-wrapper">
        <img class="responsive-img" src="http://via.placeholder.com/250x150">
      </div>
    </div>
      
    <div class="col s6 m4 l3 topSpace dashed center-align">
      <a onclick="alert('Add')" style="cursor: pointer;">
        <i class="large material-icons addPicture">add</i>
      </a>
    </div>
  </div>

Solution

  • You can specify height, min-height. I have used height 250px. you can use of your own.Use css:

    .topSpace{
  margin-top: 0.75rem;
  min-height:250px;
  height:250px;
}
.topSpace img{
   min-height:250px;
  height:250px;
}
.drop{
  margin: 0.75rem !important;
  padding: 0.5rem !important;
  background-color: rgb(248, 246, 244);
}

.dashed {
  border: 3px dashed rgba(219, 211, 193, 0.74);
  border-radius: 10px;
}

    or check here