Блог

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

 <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» будет изменено на «лол», элементы будут несуразно широкий. С другой стороны, если я изменю его на более длинный текст, чем определенная ширина, ширина всех других меньших элементов будет меньше.
Итак, последний вопрос:
Как я могу сделать ширину всех элементов такой же широкой, как самый широкий элемент, с возможностью переноса с использованием чистого html и css и без указания ширины вручную?

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

 td {
  word-wrap: break-word;
}
  

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

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

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

HTML:

foobar

Вампетер, Фома, Гранфаллоны

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

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

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