CSS המאפיין float - הוסטס

morsrh · 30-04-11, 22:09

אהלן ,
הרבה פעמים אני נתקע עם המאפיין float שפשוט לא מסתדר לי איתו
כל שימוש איתו דורש שכל ה"אבות" שלו יהיו עם האלמנט בשביל שהוא יתפוס

לדוגמא יש לי את הקוד הזה :

HTML קוד:

<html dir="rtl">
    <head>
	    <style type="text/css">
			#mainDiv{
			    width:950px;
				background-color:blue;
				margin:auto;
			}
		</style>
	</head>
	
	<body>
	    <div id="mainDiv">
			<div style="float:right;">
			    1
			</div>
			<div style="float:left;">
				2
			</div>
		</div>
	</body>
</html>

נכון שהמספר 1 תפס את הצד הימני והמספר 2 תפס את הצד השמאלי אבל למה אין להם רקע כחול כמו שאמור להיות?

בתכלס , איך אפשר לעבוד עם FLOAT על DIV ממורכז

תודה.

Second · 30-04-11, 23:25

אחרי שאתה מסיים לעבוד עם FLOAT אתה צריך להוסיף שכבה עם מאפיין CLEAR,
לדוגמא:

HTML קוד:

<html dir="rtl">
    <head>
	    <style type="text/css">
			#mainDiv{
			    width:950px;
				background-color:blue;
				margin:auto;
			}
		</style>
	</head>
	
	<body>
	    <div id="mainDiv">
			<div style="float:right;">
			    1
			</div>
			<div style="float:left;">
				2
			</div>
			<div style="clear: both"></div>
		</div>
	</body>
</html>

morsrh · 30-04-11, 23:35

מצויין , עזר לי מאוד תודה.

**IgalSt** · 01-05-11, 10:12

ציטוט:

נכתב במקור על ידי Second

אחרי שאתה מסיים לעבוד עם FLOAT אתה צריך להוסיף שכבה עם מאפיין CLEAR,
לדוגמא:

HTML קוד:

<html dir="rtl">
    <head>
	    <style type="text/css">
			#mainDiv{
			    width:950px;
				background-color:blue;
				margin:auto;
			}
		</style>
	</head>
	
	<body>
	    <div id="mainDiv">
			<div style="float:right;">
			    1
			</div>
			<div style="float:left;">
				2
			</div>
			<div style="clear: both"></div>
		</div>
	</body>
</html>

אומנם זה פתרון שלרוב עובד, אבל יש לו חסרון אחד - צריך להוסיף אלמנט נוסף לעמוד שלך שכל המטרה שלו זה לעשות clear ועל כל זה פתרון לא מושלם.

יש מאמר מעולה שמסביר על float כל מה שצריך לדעת.
ממליץ בחום לקרא וליישם.

30-04-11, 22:09	# 1
morsrh חבר מתקדם מיני פרופיל תאריך הצטרפות: Feb 2010 מיקום: אשקלון. גיל: 31 הודעות: 444	CSS המאפיין float אהלן , הרבה פעמים אני נתקע עם המאפיין float שפשוט לא מסתדר לי איתו כל שימוש איתו דורש שכל ה"אבות" שלו יהיו עם האלמנט בשביל שהוא יתפוס לדוגמא יש לי את הקוד הזה : HTML קוד: <html dir="rtl"> <head> <style type="text/css"> #mainDiv{ width:950px; background-color:blue; margin:auto; } </style> </head> <body> <div id="mainDiv"> <div style="float:right;"> 1 </div> <div style="float:left;"> 2 </div> </div> </body> </html> נכון שהמספר 1 תפס את הצד הימני והמספר 2 תפס את הצד השמאלי אבל למה אין להם רקע כחול כמו שאמור להיות? בתכלס , איך אפשר לעבוד עם FLOAT על DIV ממורכז תודה.

30-04-11, 23:25	# 2
Second חבר חדש מיני פרופיל תאריך הצטרפות: Jul 2006 מיקום: נתניה גיל: 35 הודעות: 37	אחרי שאתה מסיים לעבוד עם FLOAT אתה צריך להוסיף שכבה עם מאפיין CLEAR, לדוגמא: HTML קוד: <html dir="rtl"> <head> <style type="text/css"> #mainDiv{ width:950px; background-color:blue; margin:auto; } </style> </head> <body> <div id="mainDiv"> <div style="float:right;"> 1 </div> <div style="float:left;"> 2 </div> <div style="clear: both"></div> </div> </body> </html> __________________


	ההרשמה לפורום נפתחה - אפשרות רישום לכל אימייל (דומיינים פרטיים, gmail, הוטמייל..)!

30-04-11, 23:35	# 3
morsrh חבר מתקדם מיני פרופיל תאריך הצטרפות: Feb 2010 מיקום: אשקלון. גיל: 31 הודעות: 444	מצויין , עזר לי מאוד תודה.

חברים פעילים הצופים באשכול זה: 1 (0 חברים ו- 1 אורחים)