Cucutajs Workshop 2 - Examples

by Marcos J. Alvarez Maestre

HTML

<div id='my-item-container'>
  <div class="item">
    Elemento a
  </div>
  <div class="item">
    Elemento b
  </div>
  <div class="item">
    Elemento c
    <div class="item deep">
        Elemento d
      </div>
  </div>
</div>

<div id='my-item-container-2'>
  <div class="item">
    Elemento a
    <div class="item">
      Elemento d
      <div class="deep">
        Elemento e
        <div class="item deep">
          Elemento e
        </div>
      </div>      
    </div>
  </div>
  <div class="item2">
    Elemento b
    <div class="item">
      Elemento d
      <div class="item deep">
        Elemento e
      </div>
    </div>
  </div>
  <div class="item">
    Elemento c
  </div>
</div>

CSS

#my-item-container{
  text-align:center;
}

.item{
  width:80px;
  height:60px;
  background: white;
  border: 1px dashed #000;
  display: inline-block;
  margin-left: -4px;
}

#my-item-container-2{
  margin-top:10px;
  text-align:center;
}

#my-item-container-2 .item{
  display:block;
  background:green;
  margin-left: 14px;
}

#my-item-container-2 .item .item{
  margin-left:30px;
}


#my-item-container .item, .item2{
  background:yellow!important;  
}