html - my text is not aligning correctly -

मेरे पास दो & lt; ul & gt; और Im को मेरी दूसरी और lt ; Ul & gt; , जो कि अधिक सामग्री के साथ है

इस दूसरी & lt; ul & gt; मेरी अंतिम पंक्ति में प्रतीत होता है बाएं ओर तैरता है और न ही मेरे अंतिम पंक्ति से नीचे दिखाई देता है।

इस तरह:

कोई व्यक्ति जानता है कि मैं इसे सही कैसे संरेखित कर सकता हूँ?

मेरा जेएसडेल समस्या:

मेरा HTML:

  & lt; div id = "उदाहरण" & gt; & Lt; img src = "चित्र / छवि 1। Jpg" width = "180" height = "170" / & gt; & Lt; h2 & gt; 1º उल्ल & lt; / h2 & gt; & LT; ul & gt; & Lt; li & gt; यहां मेरे पास दो सूची आइटम हैं: & lt; / li & gt; & Lt; li & gt; & lt; मजबूत & gt; सूची आइटम 1: & lt; / strong & gt; सूची आइटम की सामग्री 1 & lt; / li & gt; & Lt; li & gt; & lt; मजबूत & gt; सूची आइटम 2 & lt; / strong & gt; सूची आइटम की सामग्री 2 & lt; / li & gt; & Lt; / ul & gt; & Lt; div id = "स्पष्ट" & gt; & lt; / div & gt; & Lt; img src = "चित्र / छवि2.jpg" चौड़ाई = "180" ऊंचाई = "170" / & gt; & Lt; h2 & gt; 2º उल & lt; / h2 & gt; & LT; ul & gt; & Lt; li & gt; यहां मेरे पास चार सूची आइटम हैं: & lt; / li & gt; & Lt; li & gt; & lt; मजबूत & gt; सूची आइटम 1 & lt; / strong & gt; सूची आइटम की सामग्री 1 & lt; / li & gt; & Lt; li & gt; & lt; मजबूत & gt; मिलनसार पंक्ति & lt; / strong & gt; यह मेरी अंतिम पंक्ति है और ठीक काम करता है, लेकिन अगली पंक्ति ठीक काम नहीं करती क्योंकि मुझे लगता है कि छवि की ऊंचाई से अधिक है, लेकिन मेरी छवि को इस ऊंचाई की आवश्यकता है & lt; / li & gt; & Lt; li & gt; & lt; मजबूत & gt; यह अधिक सामग्री वाला एक लाइटम आइटम है, अन्य और इसके ठीक काम नहीं कर रहा है & lt; / strong & gt; क्योंकि मेरी अंतिम पंक्ति अंतिम पंक्ति से नीचे नहीं है, कोई जानता है कि मैं इस स्थिति को कैसे हल सकता हूं? & Lt; / li & gt; & Lt; / ul & gt; & Lt; / div & gt;  

मेरा HTML:

  & lt; div id = "उदाहरण" & gt; & Lt; img src = "चित्र / छवि 1। Jpg" width = "180" height = "170" / & gt; & Lt; h2 & gt; 1º उल्ल & lt; / h2 & gt; & LT; ul & gt; & Lt; li & gt; यहां मेरे पास दो सूची आइटम हैं: & lt; / li & gt; & Lt; li & gt; & lt; मजबूत & gt; सूची आइटम 1: & lt; / strong & gt; सूची आइटम की सामग्री 1 & lt; / li & gt; & Lt; li & gt; & lt; मजबूत & gt; सूची आइटम 2 & lt; / strong & gt; सूची आइटम की सामग्री 2 & lt; / li & gt; & Lt; / ul & gt; & Lt; div id = "स्पष्ट" & gt; & lt; / div & gt; & Lt; img src = "चित्र / छवि2.jpg" चौड़ाई = "180" ऊंचाई = "170" / & gt; & Lt; h2 & gt; 2º उल & lt; / h2 & gt; & LT; ul & gt; & Lt; li & gt; यहां मेरे पास चार सूची आइटम हैं: & lt; / li & gt; & Lt; li & gt; & lt; मजबूत & gt; सूची आइटम 1 & lt; / strong & gt; सूची आइटम की सामग्री 1 & lt; / li & gt; & Lt; li & gt; & lt; मजबूत & gt; मिलनसार पंक्ति & lt; / strong & gt; यह मेरी अंतिम पंक्ति है और ठीक काम करता है, लेकिन अगली पंक्ति ठीक काम नहीं करती क्योंकि मुझे लगता है कि छवि की ऊंचाई से अधिक है, लेकिन मेरी छवि को इस ऊंचाई की आवश्यकता है & lt; / li & gt; & Lt; li & gt; & lt; मजबूत & gt; यह अधिक सामग्री वाला एक लाइटम आइटम है, अन्य और इसके ठीक काम नहीं कर रहा है & lt; / strong & gt; क्योंकि मेरी अंतिम पंक्ति अंतिम पंक्ति से नीचे नहीं है, कोई जानता है कि मैं इस स्थिति को कैसे हल सकता हूं? & Lt; / li & gt; & Lt; / ul & gt; & Lt; / div & gt;  

मेरी सीएसएस:

<पूर्व> #example {चौड़ाई: 700px; ऊंचाई: ऑटो; font-size: 16px; मार्जिन: 15px 0 0 0; } #example img {float: left; मार्जिन-सही: 10px; } #example h2 {color: # 444; font-size: 18px; } #example p {text-align: justify; font-size: 16px; मार्जिन टॉप: 10px; } # क्लीनर {साफ़: दोनों; मार्जिन-शीर्ष: 30px;} #example ul {list-style: none;} #example ul li {मार्जिन-शीर्ष: 5px;}

इसे प्रयोग करने का प्रयास करें:

  #example ul {list-style: none; float: left; margin: 0; padding: 0; चौड़ाई : 60%}  

इस समाधान के साथ आप चाहते हैं कि सभी पाठ जोड़ सकते हैं।