制作宽度为基于最广泛的一个

可以使用表格来实现这种行为，像这样的代码：制作宽度为基于最广泛的一个

这

<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”将改为“哈哈”，元素将会非常荒谬。另一方面，如果我将其更改为更长的文本，然后定义宽度，则所有其他较小元素的宽度将变小。因此，最后一个问题是： 如何使所有元素的宽度与最宽元素一样宽，并且使用纯html包装并且无需手动指定宽度的css &？

来源

2011-06-13 gadelat

我会很惊讶，如果只有一个CSS的解决方案，我敢肯定，你需要JavaScript或类似的计算，这是很容易实现使用jQuery。 – Blowsie 2011-06-13 12:04:39

是的，我认为是相同的，但这只是说明css在某些方面与表格等古老的解决方案相比仍然很差。多可惜。通用设计的Javascript是邪恶的。 – gadelat 2011-06-13 12:16:01

设计中的JavaScript非常常见，现代浏览器专注于JavaScript性能，而JavaScript库就像Jquery一样，使编写有效的JavaScript变得非常简单。在浏览器中禁用JavaScript的任何人都将成为少数。大多数现代网站依赖并需要JavaScript才能正常工作。 – Blowsie 2011-06-13 12:21:35

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

td { 
    word-wrap: break-word; 
}

我不认为你的DIV想法有一个纯粹的CSS/HTML解决方案。

来源

2011-06-13 12:15:41 Tak

Word-wrap仅包含元素内的文本，而不包含整个元素。在许多元素的特殊情况下，这些元素最终只会产生一个字母的文本行。 – gadelat 2011-06-13 12:35:42

有点迟到了，可以肯定的，但我已经发布了解决方案的的jsfiddle多数民众赞成工作对我非常好，有或没有JavaScript：

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

HTML：

foobar的

Wampeter，福马，Granfalloons

“O牡蛎，来和我们一起走吧！”
海象确实恳求。
“一个愉快的散步，说说笑笑，
沿途海水海滩：
我们不能超过四个做，
举个手给每个”

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

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

来源

2013-04-09 18:56:10 JPGringo

这不包裹元素，只有文本和相同的行为可以通过使用表格来实现，就像我在帖子中显示的那样。我想要这个确切的行为，但是会自动将单元格换行换行。 – gadelat 2013-04-10 12:05:17

制作宽度为基于最广泛的一个

回答

相关问题