सुनिश्चित करें कि किसी भी सामग्री को एक निश्चित div

Question

ठीक से फिट करने के लिए आकार दिया गया है, तो यहां समस्या है: मेरे पास एक div है जो लगभग पूरे स्क्रीन आकार (मोबाइल डिवाइस पर) पर सेट है, सामग्री इसके अंदर रखी जाएगी, हालांकि सामग्री स्वयं मेरे प्रत्यक्ष नियंत्रण में नहीं है। छवियों या अंदर के लिंक पर कोई इनलाइन शैलियों नहीं होगी। मुझे यह सुनिश्चित करने की ज़रूरत है कि:

1 - सबकुछ div के भीतर दिखाई देता है, और यदि लंबी लाइनें हैं तो उन्हें लपेटने के लिए मजबूर किया जाता है, या बस कट ऑफ किया जाता है।

2 - छवियों को उनके पहलू अनुपात को बनाए रखना चाहिए लेकिन div की सीमाओं के भीतर रहने के लिए आकार बदलना चाहिए।

3 - सामग्री को अंतरिक्ष को "भरना" चाहिए, आवश्यकतानुसार बड़ा या छोटा होना चाहिए।

एक अंतिम बोनस: सामग्री में अधिकतम एक छवि होगी, लेकिन कई लिंक हो सकते हैं।

मुझे यहां कुछ अन्य उत्तर मिल गए हैं, लेकिन कुछ भी नहीं जो इस विशेष चुनौती को पूरा करता है।

jQuery एक विकल्प है, लेकिन मुझे मोबाइल उपकरणों पर यह सुस्त लगता है, jQuery मोबाइल एक विकल्प है, लेकिन एक ही मूल समस्या है।

इस कार्य को सबसे प्रभावी तरीके से करने के लिए सीएसएस और जावास्क्रिप्ट का सबसे अच्छा संयोजन क्या है।

Answer 1

#wrapper { 
width: 960px; 
margin: 0 auto; 
overflow: hidden; 
} 

.img_class { 
height:auto; 
width:auto; 
max-width:960px; 
} 

/*If you have a div inside your wrapper then you would need this*/ 

#wrapper .contained_div { 
width: auto; 
display: inline-block: 
margin: 0; 
} 

/*If you want to stack stuffs one after another in a column then use this div */ 
.column { 
margin: 0 10px; 
overflow: hidden; 
float: left; 
display: inline; 
} 

Answer 2

मुझे नहीं लगता कि आपको जावास्क्रिप्ट के किसी भी रूप की आवश्यकता होगी। लेकिन क्या आप के साथ काम कर रहे हैं, यह मेरा सबसे अच्छा अनुमान है का एक नमूना बिना:

#divId { height:auto; width:900px; white-space:normal; overflow:hidden; } 
#divId img { height:auto!IMPORTANT; width:auto!IMPORTANT; max-width:900px; } 

(तुम्हारा साथ मेरे चौड़ाई मूल्यों की जगह) तो इसे सही ढंग से div के भीतर प्रदर्शित करता है

इस लेख फ़ॉर्मेट होगा, लेकिन यह पाठ का एक ब्लॉब के रूप में बाहर आ सकता है, लेकिन यह वही हो सकता है जो आप चाहते हैं। यदि आप स्वरूपण चाहते हैं, तो आपको लाइन ब्रेक के लिए div के भीतर पाठ को खोजने के लिए jQuery का उपयोग करना होगा और उन्हें </p><br /><p> के साथ प्रतिस्थापित करना होगा ... बस अनुच्छेद टैग खोलना और बंद करना सुनिश्चित करें।