Yap genişliği tabanlı ile aynı değeri en geniş üzerinde bir

Question

Bu davranış bu kodla gibi tabloları kullanarak elde edilebilir:

Bunun

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

Çıktı istediğim gibi olacaktır:

|Hello    |WWWWWWWWWWWWWWWWWWWWWW| 

Ama Bu çözüm, ekran genişliğine uymuyorsa, içindeki elemanları (bu durumda tds) yeni satıra kaydırmaz! Yani bunu div ve css kullanarak yapmak istiyorum. i kullanıyorsanız:

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

Tabii çalıştığını ve çıkışlar aynı, ama tabii ki Metin ve #eq içindeki elemanların sayısı değişkendir! Yani, eğer metinler "lol" olarak değiştirilirse, öğeler saçma bir şekilde genişler. Diğer tarafta, daha uzun metne değiştirdiğimde, genişlik tanımlanmışsa, diğer tüm küçük elemanların genişliği daha küçük olacaktır. Öyleyse son soru şudur: Tüm elemanların genişliğini, geniş html & css kullanarak ve genişliğini manuel olarak belirtmeden sarmalama yeteneğine sahip en geniş öğe kadar genişlikte nasıl yapabilirim?

Answer 1

Tablolar daha kolay seçenek olacaktır. Tablo hücrelerinde forcing wrap denediniz mi?

td { 
    word-wrap: break-word; 
} 

Ben senin DIV fikrine saf CSS/HTML çözüm yoktur sanmıyorum.

Answer 2

geç partiye Biraz, emin olmak için, ama ben JavaScript ile veya olmadan, benim için çok işe yaramış bir çözümün bir JSFiddle gönderdiniz:

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

HTML:

filanca

Wampeter, Foma, Granfalloons

"O İstiridye, gel bizimle yürü!"
The Walrus beseech yaptı.
"keyifli bir yürüyüş, hoş bir konuşma, tuzlu sahilde bulunan
.
Biz
her birine bir el vermek için ve dörtten fazla yapamaz"

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

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

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

(isteğe bağlı) 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);