Сделать ширину всех элементов равной по ширине

Question

Такое поведение может быть достигнуто с помощью таблиц, как с этим кодом:

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

Вывод этого будет как я хочу:

|Hello               |WWWWWWWWWWWWWWWWWWWWWW|

Но это решение не переносит элементы внутри (в данном случае tds) на новую строку, если она не соответствует ширине экрана! Так что я хотел бы сделать это с помощью divs и css. Если я использую:

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

Конечно, он работает и выводит то же самое, но, конечно, текст и количество элементов внутри #eq являются переменными! Поэтому, если текст «WWWWWWWWWWWWWWWWWWWWWW» будет изменен на «lol», элементы будут нелепо широкими. С другой стороны, если я изменю его на более длинный текст, то определенную ширину ширина всех других меньших элементов будет меньше. Итак, последний вопрос: Как сделать так, чтобы ширина всех элементов была такой же широкой, как и у самого широкого элемента, с возможностью переноса с использованием чистого HTML и CSS и без указания ширины вручную?

Answer 1

Таблицы будут более простым вариантом. Вы пробовали принудительное наложение на ячейки таблицы?

td {
  word-wrap: break-word;
}

Я не думаю, что для вашей идеи DIV существует чистое решение CSS / HTML.

Answer 2

Немного опоздал на вечеринку, чтобы быть уверенным, но я опубликовал JSFiddle решения, которое очень хорошо работало для меня, с Javascript или без:

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

HTML:

Foobar

Wampeter, Foma, Granfalloons

«О Устрицы, иди и гуляй с нами!»
Морж умолял.
"Приятная прогулка, приятная беседа,
Вдоль соленого пляжа:
Мы не можем делать больше четырех,
Чтобы протянуть руку каждому ".

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

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

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

(необязательно) 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);