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）包装到新行！所以我想用div和css做这个。如果我使用：

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

当然它的工作原理和输出相同，但当然#eq中的文本和元素数量是可变的！因此，如果文本“WWWWWWWWWWWWWWWWWWWWWW”将更改为“lol”，则元素将是荒谬的宽。另一方面，如果我将其更改为更长的文本，则定义的宽度，所有其他更小元素的宽度将更小。所以最后一个问题是： 如何使所有元素的宽度与最宽的元素一样宽，并且能够使用纯html＆amp; amp; css并且没有手动指定宽度？

Answer 1

表格将是更容易的选择。你有没有在表格单元格上试过forcing wrap？

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

根据最宽的元素使所有元素的宽度相等

2 个答案: