मेक चौड़ाई आधारित बराबर व्यापक पर एक

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| 

लेकिन यह समाधान नई लाइन पर (इस मामले में टीडीएस) के अंदर तत्वों को लपेटता नहीं है अगर यह स्क्रीन चौड़ाई के लिए उपयुक्त नहीं है! तो मैं divs और css का उपयोग करके ऐसा करना चाहता हूं। अगर मैं का उपयोग करें:

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

ज़रूर यह काम करता है और आउटपुट एक ही है, लेकिन निश्चित रूप से पाठ और #eq अंदर तत्वों की संख्या चर रहे हैं! तो अगर पाठ "WWWWWWWWWWWWWWWWWWWWWW" को "lol" में बदल दिया जाएगा, तत्व बेतुका व्यापक होंगे। दूसरी तरफ, यदि मैं इसे लंबे पाठ में बदलता हूं तो परिभाषित चौड़ाई, अन्य सभी छोटे तत्वों की चौड़ाई छोटी होगी। तो अंतिम प्रश्न यह है कि: मैं सभी तत्वों की चौड़ाई को व्यापक HTML के रूप में चौड़ा कैसे कर सकता हूं, शुद्ध HTML & सीएसएस का उपयोग करके लपेटने की क्षमता और चौड़ाई को मैन्युअल रूप से निर्दिष्ट किए बिना?

Answer 1

टेबल्स आसान विकल्प होगा। क्या आपने टेबल सेल पर forcing wrap की कोशिश की है?

td { 
    word-wrap: break-word; 
} 

मुझे नहीं लगता कि आपके DIV विचार के लिए एक शुद्ध सीएसएस/एचटीएमएल समाधान है।

Answer 2

पार्टी के लिए देर से एक छोटी सी, सुनिश्चित करने के लिए है, लेकिन मैं एक समाधान की एक JSFiddle कि के साथ या बिना जावास्क्रिप्ट मेरे लिए बहुत अच्छी तरह से काम कर रहा है, पोस्ट किया है:

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

HTML:

foobar

Wampeter, Foma, Granfalloons

"हे Oysters, आओ और हमारे साथ चलना!"
वालरस ने विनती की थी।
"एक सुखद पैदल दूरी पर, एक सुखद बात,
सागर समुद्र तट के साथ:।
हम चार से अधिक के साथ ऐसा नहीं कर सकते,
प्रत्येक के लिए एक हाथ देने के लिए"

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

सीएसएस:

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

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

(वैकल्पिक) जे एस:

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