הוסטס - פורום אחסון האתרים הגדול בישראל

הוסטס - פורום אחסון האתרים הגדול בישראל (https://hosts.co.il/forums/index.php)

- פורום תיכנות (https://hosts.co.il/forums/forumdisplay.php?f=14)

- - CSS המאפיין float (https://hosts.co.il/forums/showthread.php?t=89319)

morsrh

30-04-11 22:09

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 ממורכז

תודה.

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 (פרסם 803116)

אחרי שאתה מסיים לעבוד עם 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 כל מה שצריך לדעת.
ממליץ בחום לקרא וליישם.

כל הזמנים הם GMT +2. הזמן כעת הוא 20:42.