ancho Hacer de todos los elementos iguales basa en más ancha

Question

Este comportamiento se puede lograr utilizando tablas, al igual que con este código:

<style> 
table { 
    table-layout:fixed; 
    width:100%; 
} 
td {border:1px solid red;} 
</style> 
<table> 
<tr> 
    <td>Hello</td> 
    <td>WWWWWWWWWWWWWWWWWWWWWW</td> 
</tr> 
</table> 

salida de esto será lo que quiera:

|Hello    |WWWWWWWWWWWWWWWWWWWWWW| 

Pero esta solución no envuelve elementos dentro (en este caso, tds) a una nueva línea si no se ajusta al ancho de la pantalla. Entonces me gustaría hacer esto usando divs y css. Si yo uso:

<style> 
#eq > div { 
    width: 400px; 
    float: left; 
} 
</style> 
<div id="eq"> 
    <div>Hello</div> 
    <div>WWWWWWWWWWWWWWWWWWWWWW</div> 
</div> 

seguro de que funciona y salidas misma, pero, por supuesto, el texto y el número de elementos en el interior #eq son variables! Entonces, si el texto "WWWWWWWWWWWWWWWWWWWWWW" cambiará a "lol", los elementos serán absurdamente anchos. Por otro lado, si lo cambio a texto más largo, entonces el ancho definido, el ancho de todos los otros elementos más pequeños será más pequeño. Así que la pregunta final es: ¿Cómo puedo hacer que el ancho de todos los elementos sea tan ancho como el más ancho con la capacidad de ajustar usando html puro & css y sin especificar manualmente el ancho?

Answer 1

Las tablas serán la opción más fácil. ¿Has probado forcing wrap en celdas de tabla?

td { 
    word-wrap: break-word; 
} 

No creo que haya una solución pura de CSS/HTML para su idea de DIV.

Answer 2

Un poco tarde a la fiesta, para estar seguro, pero he publicado un jsFiddle de una solución que ha funcionado muy bien para mí, con o sin Javascript:

http://jsfiddle.net/jpgringo/LTEsZ/7/

HTML:

foobar

Wampeter, Foma, Granfalloons

"¡O ostras, ven y camina con nosotros!"
La morsa suplicaba.
"Un agradable paseo, una charla agradable,
A lo largo de la playa salobre:.
que no podemos hacer con más de cuatro,
para dar una mano a cada uno"

=========================================

CSS:

body { 
    font-family:Verdana, Arial, sans-serif; 
    font-size:10px; 
} 

#myContentSection { 
    display:table; 
    width:100%; 
} 

#myContentSection .content { 
    display:table-row; 
} 

#myContentSection .subsection { 
    display:table-cell; 
    border:solid 1px gray; 
    /* the next line is optional, but gives equal-width columns if you know the 
    number of columns ahead of time */ 
    width:33%; 
    padding:4px 8px; 
} 

===================================== ===

(opcional) JS:

var sectionID = 'myContentSection'; 
var subsectionClass = 'subsection'; 

var contentSection = document.getElementById(sectionID); 
var colCount = contentSection.getElementsByClassName('subsection').length; 
console.log('# of columns:', colCount); 
var width = Math.floor(100/colCount); 
console.log('column width: ', width,'%'); 
var css = '#' + sectionID + ' .' + subsectionClass + ' { width: ' + width + '%; }'; 
var style = document.createElement('style'); 

style.type = 'text/css'; 
if (style.styleSheet){ 
    style.styleSheet.cssText = css; 
} else { 
    style.appendChild(document.createTextNode(css)); 
} 

document.head.appendChild(style);