Tengo divs bloqueados en línea como una cuadrícula. Me gustaría forzar a todos los que están en la misma línea a la misma altura, deberían obtener la altura del div más largo.

Css, jquery o una simple solución javascript sería genial.

Es algo muy común hoy en día ... fui a echar un vistazo a la masonería, pero por lo que entendí en los gráficos de muestra, no se alinea así ... ¿estoy en lo cierto?

El blog en cuestión:http://ildesign-blogger-demo-1.blogspot.fr/

El HTML:

<div class="container>
    <div class="inline">text</div>
    <div class="inline">text + image</div>
    <div class="inline">text</div>
    <div class="inline">whatever</div>
    <div class="inline">text + image</div>
    <div class="inline">text</div>
</div> 

El CSS:

.container {width: 100%; display:block;} 
.inline {display: inline-block; width: 28%; margin: 1%; padding: 1%;}

Entonces, hay tres divisiones en línea en cada línea, me gustaría que las líneas estén alineadas, por lo que las divisiones en línea deben tener la misma altura que la división más larga en la línea ...

Editar: reedité esta publicación para agregar que el html es generado por una plantilla xml de Blogger. Entonces, si sugiere agregar cada tres div en línea en un div que será como una fila, no sé cómo hacerlo ... el código xml original:

<div class='blog-posts hfeed'>
  <b:include data='top' name='status-message'/>
  <data:defaultAdStart/>
  <b:loop values='data:posts' var='post'>
    <div class='date-outer'>
      <h2 class='date-header'><span><data:post.timestamp/></span></h2>
      <div class='date-posts'>
        <div class='post-outer'>
          <b:include data='post' name='post'/>
          <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
            <b:include data='post' name='comments'/>
          </b:if>
          <b:if cond='data:blog.pageType == &quot;item&quot;'>
            <b:include data='post' name='comments'/>
          </b:if>
        </div>
        <b:if cond='data:post.includeAd'>
          <b:if cond='data:post.isFirstPost'>
            <data:defaultAdEnd/>
          <b:else/>
            <data:adEnd/>
          </b:if>
          <div class='inline-ad'><data:adCode/></div>
          <data:adStart/>
        </b:if>
        <b:if cond='data:post.trackLatency'>
          <data:post.latencyJs/>
        </b:if>
      </div>
    </div>
  </b:loop>
<data:adEnd/>
</div>

Entonces el.blog-posts = .envase y el.date-exterior = .en línea en mi ejemplo html anterior ...

¿La masonería puede hacerlo? ¿O un código jquery para hacer una cuadrícula con alturas iguales?