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

Question

尝试对齐一组div时遇到问题。我有这个骨架：

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

我希望那些带有“小”类的div在右边浮动，现在可以了，但我有两个问题：

右对齐问题：

高度对齐问题 我需要这三个列的高度区域相同（name1，name2，其他..）我无法添加更多容器，因为这是由应用程序生成的。在这三种情况下，我有同样的意见吗？最高的高度（当内容太少时不包括“其他”列）

这里有一个例子：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

一种方法是通过CSS，即使用 table-cell 属性。 但为了使它工作，你需要删除浮动属性。 我试图对你小提琴上现有的代码做最小的改动。 以下是代码段。

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

请在下面使用.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;
}

见https://jsfiddle.net/manish1226/fks86zq0/3/