قرار دادن دو div کنارهم در css

3 هفته قبل 2 هفته قبل 337 بازدید 43 پاسخ سارا مصطفی پور

سلام ببخشید من میخواستم دوتا div کنار هم دیگه قرار بدم ولی هر کاری میکنم زیر هم قرار میگیره. کسی میتونه کمک کنه؟

بهزاد
2 هفته قبل
  • برای اینکه دوتا divکنار هم قرار بگیره شما باید اونها رو شناور کنید با استفاده از float ،

    div {
        float:left;
    }

    و اگه المن های دیگه ای بخواید داخلش قرار بدین خارج از محدوده وایمیستن که باید clearfix کنید و div دیگه ای میسازین :

    <div class="clearfix"></div>
    .clearfix{
       clear:both;
       Content: " ";
       Display:table;
    }
    • دانیال

      سلام آقا بهزاد وقتی که divیا هر تگ بلاکی که شناور بشه کنار هم قرار نمیگیره باید display شون اینلاین یا اینلاین بلاک بشه و یا اینه با پوزیشن ها ان هارو کنار هم قرار بدیم اما امکان نداره float کنار هم قرار بگیرند (2 هفته قبل)

    • بهزاد

      دانیال جان میتونی به این صفحه مراجعه کنی :https://www.w3schools.com/css/tryit.asp?filename=trycss_layout_clearfix2 . (2 هفته قبل)

    • دانیال

      دوست عزیز با این روش خیلی پیچیده میشه الان که وارد این لینک شدم برای من یادآوری شد این تگ های css خیلی ممنونم (2 هفته قبل)

    • بهزاد

      پیچیدگی نداره؛ بلکه تگ div بلاک بودنشو حفظ میکنه در ثانی اگر با توجه به نیازش باید استفاده کنه ، میتونه از تگ های inline استفاده کنه بجای اینکه تگ بلاک رو به اینلاین تبدیل کنه (2 هفته قبل)

    • دانیال

      بله زیاد بیچیدگی نداره اگه نمیخوایم بلاک تبدیل بشه به اینلاین باید از روش شما استفاده کرد (2 هفته قبل)

    alititan0508
    2 هفته قبل
  • میتونید یک div ب عنوان div والد ایجاد کنید و قسمت های  سایت تون که میخواین کنار هم قرار بگیرن داخلش قرار بدبن و به div والد  display flex بدین بهترین راه و استاندار ترین راه ممکن همینه

    div {
            display: flex;
    }
    دانیال
    3 هفته قبل
  • اگه css بلد باشی باید در css  باید اینکارو انجام بدی

    displays هر دوتاشون رو اینلاین یا اینلاین بلاک بکن ۱۰۰ درصد میان کنار هم  

    مشکلش هم اینه که این ۲ تا divبلاک هستند

     

    div{
    Display:inlane-black;
    }
    • دانیال

      درباره ویژگی‌های اینلاین و بلاک تو گوگل سرچ کن اگه اینگلیسی بلدی اینگلیسی سرچ کن راجبشون یهتر میفهمی (2 هفته قبل)

    • عزیز سلطانپور

      div{ Display:inlane-black; } (2 هفته قبل)

    • عزیز سلطانپور

      inline (2 هفته قبل)

    • سارا مصطفی پور

      کد اضافه کردم نشد (2 هفته قبل)

    • دانیال

      امکان نداره کد اضافه نشه شاید درست ننوشتی (2 هفته قبل)

    • سارا مصطفی پور

      من این دوتا div رو یه border برای هرکدوم ایجاد کردم و حالا میخام این دوتا کنارهم قرار بگیره نمیشه، display روهم inline گذاشتم بازم نشد (2 هفته قبل)

    • دانیال

      display رو inlane-black بکن حتما درست میشه (2 هفته قبل)

    • دانیال

      اگه نشد کد تو در قسمت افزودن پاسخ اون پایین بزار (2 هفته قبل)

    • سارا مصطفی پور

      بعد display رو inline-black کنم بعدش با margin باید جهت div اول و دوم تعیین کنم؟ (2 هفته قبل)

    • دانیال

      برای کنار هم گذاشتن ۲ div مارجین زیاد مهم نیست اولش باید هر ۲ div کلاس مختلف داشته باشند و به کلاس هاشون یو بک گراند و یک ارتفاع و عرض بده تا مشخص شوند (2 هفته قبل)

    • دانیال

      میتونی به جای کلاس آیدی هم بدی ولی بعد از این ها حتما برای ۲ تا div باید display شون رو ایلاین بلاک کنی تا بیان کنار هم اگه display شو اینلاین بلاک نکنی کنار هم نمیان (2 هفته قبل)

    • بهزاد

      در حالت استاتیک ما دوتا div خواهیم داشت ولی در حالت داینامیک تبدیل به یک div خواهد شد و باید از حلقه ها استفاده کنیم. Float راه حله (2 هفته قبل)

    • بهزاد

      در ادامه این رو هم اضافه کنم که در حالت inline همون div مقدار margin بالا و پایین رو نمیگیره و فقط از چپ و راست اعمال میشه (2 هفته قبل)

    • دانیال

      بله کاملا درست فرمودید به جز display وfloat ها با پوزیشن ها هم میشه بیان کنار هم قرار بگیرند (2 هفته قبل)

    • بهزاد

      position همونطور که از اسمش پیداست موقعیت یک المنت رو تغییر میده و جابجاش میکنه در حالیکه با جابجا کردنش محفظه اون قسمت خالی میمونه و برای استایل مناسب نیست. دانیال جان من احساس میکنم هنوز شما با مفاهیم آشناییت کامل نداری . (2 هفته قبل)

    • دانیال

      نه اخه با چند روش من گفتم ایت فردی که سوال پرسیده میگه نمیشه من هم تماما روش هارو بهش گفتم (2 هفته قبل)

    • دانیال

      ببین برای کنار گذاشتن ۲ divکنار هم خیلی روش ها است که من ۲ تا روش رو گفتم روش های دیگه شو هم بلدم اما فردی که سوال پرسیده خوب نمیفهمه بخاطر همین روش های پیچیده وسخت رو نگفتم (2 هفته قبل)

    • سارا مصطفی پور

      ممنون (2 هفته قبل)

    • دانیال

      خواهش میکنم (2 هفته قبل)

    • میکائیل رئیسی

      inline-block (2 هفته قبل)

    • بهزاد

      سارا مصطفی پور لطفا اگه جواب رو گرفتی و مشکلت حل شد تیک بهترین جواب رو بزن تا سایر دوستان به چنین مشکلی برخوردن موطل نباشن . سپاس (2 هفته قبل)

    • سارا مصطفی پور

      بله به جوابم رسیدم اون نظر تیک زدم ، فک کنم نظر خودتون بود (2 هفته قبل)

    • بهزاد

      بله متوجه شدم ، خوبه که به جوابتون رسید. (2 هفته قبل)

    علی احمدی
    3 هفته قبل
  • Display تگ های div تونو توی css برابر مقدار inline block یا inline قرار بدید تا div هاتون کنار همدیگه قرار بگیرن

    تگ div توی html از نوع بلاک هست و تمام محدوده لاین خودشو اشغال میکنه برای همین نمیشه توی حالت عادی دو تا div رو کنار هم قرار داد

    • سارا مصطفی پور

      من این دوتا div رو یه border برای هرکدوم ایجاد کردم و حالا میخام این دوتا کنارهم قرار بگیره نمیشه، display روهم inline گذاشتم بازم نشد (2 هفته قبل)

    میکائیل رئیسی
    3 هفته قبل
  • برای قرار دادن دو div در کنار هم توی یک خط میتونین display همون div رو که به طور پیشفرض روی block هست رو به inline-block تغییر بدین و برای اینکار فقط کافیه این یک خط کدی رو که براتون این پایین میزارم رو به class یا div مورد نظر خودتون اضافه کنید:

     

    display: inline-block;

     

     امیدوارم مفید بوده باشه واستون:)

    آیدا خالقی
    3 هفته قبل
  • سلام!

    باید استایل زیر را به div ها بدید:

    div {
            display: inline-block
    }

    چون که div ها تگ های block هستند و کل عرض صفحه رو اشغال میکنند.

    برای اطلاعات بیشتر میتونید درباره ویژگی های هر یک از تگ های از نوع block و inline سرچ کنید.

    موفق باشید :)

    • سارا مصطفی پور

      اینکار کردم نشد ، با margin باید از طرفین فاصله بدم؟ مثلا اولین div بیاد سمت راست و دومین div بیاد بالا؟ که کنار هم قرار بگیرن (2 هفته قبل)

    • آیدا خالقی

      میتونید سورس رو بذارید؟ اگه هنوز مشکل تون برطرف نشده (2 هفته قبل)

    • سارا مصطفی پور

      درست شد عزیزم ممنون (2 هفته قبل)

    کیان بابان
    2 هفته قبل
  •  

    
    container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 20px;
    }

    باید این استایل رو به کانتینر دو دیو بدین

    از این کد استفاده کن :

     

    div {
            display: inline-block
    }

    موفق باشی

    علی شاهی
    2 هفته قبل
  • به دیو پدرشون

    display:flex

    بده

    افزودن پاسخ