كيفية الحفاظ على كتل CSS عومت مستقلة عن بعضها البعض

السؤال من webchicklet في CSS في 10 يوليو 2008 | 3 الردود

أريد كثير من الأحيان إلى قائمة البنود مع الصورة التي طفت إلى اليسار أو اليمين من كتلة من النص ، تليها صورة أخرى طفت إلى اليسار أو اليمين من كتلة لها من النص ، يليه آخر وآخر. المشكلة هي أنه ما لم يكن هناك نص بما فيه الكفاية ليساوي أو يتجاوز طول الصورة ، كتلة المقبل ستبدأ تحت النص (بدلا من تحت الصورة) ، مما أدى إلى ما يشبه هذا :
نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي


ما نريده هو شيء يشبه هذا بدلا من ذلك :
نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي
من أجل تحقيق هذا الهدف ، ينبغي أن تضاف فئة CSS البسيطة التي يمكن بعد ذلك تطبيقها على العلامة <BR>الخاص. (لقد دعت هذه الفئة. اضحة في رمز أدناه). هذه الفئة تستفيد من خاصية CSS واضحة ، وسهلة جدا للاستخدام.
دعونا نلقي نظرة على رمز :


كود:
 <html> 
 <head> 
 <title>test</title> 
 <style type="text/css" media="screen"> 
 .floatleft { 
 float: left; 
 margin: 0 5px 5px 0; 
 } 
 .clear { 
 clear: both; 
 } 
 </style> 
 <div style="width: 400px;"> 
 <p><img src="testpic.png" alt="" title="testpic"  class="floatleft" height="314" width="155" /> This is a test to  figure out how to force new blocks to begin after the bottom of an  image, and not after the bottom of the text. Will play around with  various scenarios. Placing each paragraph in its own div doesn't  help.</p> 
 <br class="clear" /> 
 <p><img  src="testpic.png" alt="" title="testpic" class="floatleft" height="314"  width="155" /> This is a test to figure out how to force new blocks  to begin after the bottom of an image, and not after the bottom of the  text. Will play around with various scenarios.</p> 
 <br class="clear" /> 
 <p><img src="testpic.png" alt="" title="testpic"  class="floatleft" height="314" width="155" /> This is a test to  figure out how to force new blocks to begin after the bottom of an  image, and not after the bottom of the text. Will play around with  various scenarios.</p> 
 </div> 
 </head> 
 </html>

إشعار الفئة. اضحة؟ لاحظ كيف استخدمنا ثم فإنه مع كل من به غرفة واحدة؟ هذا كل ما عليك القيام به. ما تفعله هو أن تخبر المستعرض لعدم السماح ليتم طرح أي عنصر إما إلى اليسار أو الجانب الأيمن من العنصر (أساسا "للتطهير" الجانبين عنصر من عناصر أي العائمة الأخرى).
وعادل لجعل هذا الواقع تبدو "جميلة" ، واضاف لقد كنت في علامة DIV مع عرضا من 400 ، بحيث يمكنك رؤية كيف يمكن ان ننظر في بلوق وظيفة عادية.
نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي