Deixar todos os elementos do meio com um mesmo tamanho

[Diogo Camargo 18]

Olá pessoal, da uma olhada no problema abaixo, trata sobre como definir o tamanho de um elemento que está no meio igual em todos os blocos.


Questões:

Os blocos não podem quebrar linha
Os elementos "B" Contém texto diversificado

Os elementos "B" não podem ter um tamanho fixo
Como deixar todos os elementos B com o mesmo tamanho?

NORMAL

[A....] [B Lorem ipsum dolor sit amet] [C......]
[A....] [B Lorem ipsum] [C......]
[A....] [B Lorem ipsum dolor sit] [C......]

IDEAL

[A....] [B Lorem ipsum dolor sit amet ] [C......]
[A....] [B Lorem ipsum                ] [C......]
[A....] [B Lorem ipsum dolor sit      ] [C......]

CSS inicial

<style>
B {
display:-moz-inline-stack;
display:inline-block;
zoom: 1;
*display: inline;
vertical-align:middle;

/**
* Definindo um tamanho máximo padrão
*/
max-width: 300px;
min-width: 60px;

/**
* Quebrando todas as palavras que iriam utrapassar o limite
*/
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto; 
word-wrap:break-word;
}
</style>

Como deixar todos os elementos "B" do mesmo tamanho usando JavaScript e sem usar <table />?

Fiz um plugin jQuery muito simples e gostaria de compartilhar com vcs.

<script>
(function($) {
$.fn.stretch = function() {
    var last_size = 0;
    
    // Percorre todos os elementos para encontrar o maior elemento
    this.each(function() {
        var width = $(this).width();
        
        // Amazena "width" caso o tamanho seja maior que o último
        if (width > last_size) {
            last_size = width;
        };
    });
    if (last_size) {
        this.width(last_size + 5); // CSS padding-right:5px;
    };
};
})(jQuery);
</script>

<script>
// Uso
$('div').stretch();
</script>

Se vcs conhecerem uma melhor solução, por favor.

[Rafael Sirotheau 43]

Acho que usando o .map ao invés do .each fica melhor:

$.fn.stretch = function() {
    var larguraMax = this.map(function(index, elem) {
        return $(elem).width();
    }).get();

    return this.width( Math.max.apply(this, larguraMax) );
};

$('div').stretch();