الفريق العربي للبرمجةأرشيف المنتديات · 2000 – 2023
نسخة أرشيفية للقراءة فقط — التسجيل والمشاركة مغلقان، والمحتوى محفوظ كما كان.

مشكلة float right مع ال div

بدأه sameh mahmoud في 7 يناير 2012 · 3 رد · 1,066 مشاهدة · في منتدى تصميم صفحات الويب
مشاركة: واتساب X فيسبوك تيليجرام
#1 صاحب الموضوع

السلام عليكم

عند وضع ال div أ داخل div ب بحيث يكون أ float right يختفي ال div ب لسبب غير معلوم

المثال التالي يوضع المشكلة :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type = "text/css">
.c1{
float:right;
width:300px;
height:300px;
border:solid 1px red;
}
</style>
</head>
<body>
<div style = "width:700px;height;600px;border:solid red 1px">
<div class = "c1">

</div>
</div>
</body>
</html>
وتظهر النتيجة بالشكل التالي :
post-158349-021919300 1325940265_thumb.j

      
 المرفقات

    
Untitled.jpg

    

      

      
 سبـــــحــــان الله و بحمده سبحان الله العظيم  
403100468.gif



    

  

    
    

      
#2
        
        

      
و عليكم السلام 
<div style = "width:700px;height;600px;border:solid red 1px">
لقد أخطأت في   ;height;600px 
فقط يجب كتابة  ;height: 600px

      
      

      
    

  

    
    

      
#3
        
        

      
السلام عليكم
اشكرك على الرد اخى الكريم 
لكن هذا الخطأ لم يحل المشكلة حيث انني لم اقصد تحديد الإرتفاع فقد نسيت ان امسح هذه الخاصية (height) 
المشكلة هنا اذا قمت بتحديد الخاصية float الى القيمة right فأن مساحة ال div الحاوي تتقلص ويتوجب عليك تحديد الخاصية height 
انظر الفرق :
في الكود التالي قمنا بإلغاء الخاصية float .
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
	<style type = "text/css">
		.c1{
			/*float:right*/;
			width:300px;
			height:300px;
			border:solid 1px red;
		}
	</style>
</head>
<body>
	<div style = "width:700px;border:solid red 1px;">

	<div class = "c1">

	</div>
	</div>
</body>
</html>
هنا ال div الاب يأخذ المساحة الارتفاع المطلوب .
post-158349-023437700 1325957319_thumb.j
اما في الكود التالي اعدنا الخاصية float مرة آخرى 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
	<style type = "text/css">
		.c1{
			float:right;
			width:300px;
			height:300px;
			border:solid 1px red;
		}
	</style>
</head>
<body>
	<div style = "width:700px;border:solid red 1px;">

	<div class = "c1">

	</div>
	</div>
</body>
</html>
فالنتيجة كما ذكرت في اول الموضوع اختفاء ال div الاب .

      
 المرفقات

    
Untitled2.jpg

    

      

      
 سبـــــحــــان الله و بحمده سبحان الله العظيم  
403100468.gif



    

  

    
    

      
#4
        
        

      
و عليكم السلام
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
        <style type = "text/css">
                .c1{
                        float:right;
                        width:300px;
                        height:300px;
                        border:solid 1px red;
                }

				.clear{
					clear: both;
				}
        </style>
</head>
<body>
        <div style = "width:700px;border:solid red 1px;">

        <div class = "c1">

        </div>
		<div class="clear"></div>
        </div>
</body>
</html>
قمت بإضافة block فارغ
<div class="clear"></div>
 مع منع خاصية float على اليمين و اليسار
.clear{ clear: both; }

      
      

      
    

  

    
    
    
 مواضيع مشابهة