将div中的高度与左右浮动对齐

Question

I have a problem trying align a set of divs. I have this skeleton:

<div>

    <div id="name1"></div>
    <div id="name2"></div>
    <div id="name3" class="little"></div>
    <div id="name4" class="little"></div>
    <div id="name5" class="little"></div>
    <div id="name6" class="little"></div>

</div>

I want that divs with "little" class float in the right, this works now, but I have two problems:

Right align problem:

Height align problem I need this height area the same for the three columns (name1, name2, others..) I can't add more containers because this is generated by the application. It's posible that I have same hegiht in the three cases? Height of the most taller (excluding "others" column when the content be too little)

Here a fiddle with the example: https://jsfiddle.net/fks86zq0/

Answer 1

<div class="container">
<div id="name3" class="little">Hello world 1</div>
<div id="name4" class="little">Hello world 2</div>
<div id="name5" class="little">Hello world 2</div>
<div id="name6" class="little">Hello world 2</div>
</div>



.little{
  border: 1px solid #d2d2d2;
  border-radius: 4px;
  padding: 1.5em 0 0.2em;
  margin-bottom: 28px;
  width: 100%;
}
.container{
  width: 26.5%;  
  float:right;
}

Answer 2

One way is through CSS, ie using table-cell Property. But for that to make it work, you need to remove float property. I tried to do minimum changes to your existing code present on fiddle. Below is the code snippet.

HTML:-

<div class= "row">
    <div id="name1" class="col">Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 150</div>
    <div id="name2" class="col">Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer </div>
  <div class="col">
    <div id="name3" class="little">Hello world 1</div>
    <div id="name4" class="little">Hello world 2</div>
    <div id="name5" class="little">Hello world 2</div>
    <div id="name6" class="little">Hello world 2</div>
  </div>
</div>

CSS:-

#name1, #name2 {
    border: 1px solid #a1c7e5;
    border-radius: 4px;
    padding: 0.5em 0 2.5em 0.5em;
    margin-right: 1.5em;
    width: 31%;
    position: relative;
}

.little{
    border: 1px solid #d2d2d2;
    border-radius: 4px;
    padding: 1.5em 1em 0.2em;
    margin-bottom: 28px;
    width: 26.5%;
}

.row {
  display: table;
}

.col {
   display: table-cell;
}

Answer 3

please used below .little class css.

.little {
   border: 1px solid #d2d2d2;
   border-radius: 4px;
   padding: 1.5em 0 0.2em;
   margin-bottom: 28px;
   float: right;
   width: 26.5%;
   clear: right;
}

see in https://jsfiddle.net/manish1226/fks86zq0/3/