مرتب کردن Div مثل تصویر زیر

3 روز پیش
توسط جواد کرمی آپدیت شد
میثم ( 1800 تجربه )
1 هفته پیش

سلام.
ببخشید شاید سوالم مبتدی باشه.
امروز کلا هنگ کردم!!!
اگه بخوایم 3 تا DIV رو مثل تصویر پایین بچینیم کدش چی میشه؟؟؟؟
تصویر سمت چپ نسخه دسکتاپ . سمت راست موبایل
http://s7.picofile.com/file/8391943526/Untitled_2.png

بهترین پاسخ انتخاب شده توسط میثم
میلاد
1 هفته پیش
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>

        <style>
            * {
                box-sizing: border-box;
            }
            body {
                direction: rtl;
            }
            .content {
                display: flex;
                flex-direction: column;
            }

            .content__1,
            .content__2,
            .content__3 {
                padding: 20px;
                font-size: 30px;
                text-align: center;
            }
            .content__1 {
                background-color: rgb(118, 218, 118);
            }
            .content__2 {
                background-color: rgb(149, 149, 247);
            }
            .content__3 {
                background-color: rgb(247, 195, 100);
            }

            @media only screen and (min-width: 600px) {
                .content {
                    flex-wrap: wrap;
                    height: 70vh;
                }
                .content__2 {
                    order: 1;
                    flex: 1;
                }
                .content__1 {
                    height: 25vh;
                }
                .content__3 {
                    height: 45vh;
                }
            }
        </style>
    </head>
    <body>
        <div class="content">
            <div class="content__1">1</div>
            <div class="content__2">2</div>
            <div class="content__3">3</div>
        </div>
    </body>
</html>
میلاد ( 145480 تجربه )
1 هفته پیش
تخصص : طراح رابط کاربری - Front-End
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>

        <style>
            * {
                box-sizing: border-box;
            }
            body {
                direction: rtl;
            }
            .content {
                display: flex;
                flex-direction: column;
            }

            .content__1,
            .content__2,
            .content__3 {
                padding: 20px;
                font-size: 30px;
                text-align: center;
            }
            .content__1 {
                background-color: rgb(118, 218, 118);
            }
            .content__2 {
                background-color: rgb(149, 149, 247);
            }
            .content__3 {
                background-color: rgb(247, 195, 100);
            }

            @media only screen and (min-width: 600px) {
                .content {
                    flex-wrap: wrap;
                    height: 70vh;
                }
                .content__2 {
                    order: 1;
                    flex: 1;
                }
                .content__1 {
                    height: 25vh;
                }
                .content__3 {
                    height: 45vh;
                }
            }
        </style>
    </head>
    <body>
        <div class="content">
            <div class="content__1">1</div>
            <div class="content__2">2</div>
            <div class="content__3">3</div>
        </div>
    </body>
</html>
میلاد ( 145480 تجربه )
1 هفته پیش
تخصص : طراح رابط کاربری - Front-End

راه حل بهترش هم اینه که بجای flexbox عمودی، با css grid این چیدمان رو پیاده سازی کنید.

میثم ( 1800 تجربه )
1 هفته پیش

سلام @milad عزیز.
خیلی ممنونم.
کارم راه افتاد.
فقط یه سوال :
چطور به این اعتقاد دارین؟

راه حل بهترش هم اینه که بجای flexbox عمودی، با css grid این چیدمان رو پیاده سازی کنید.
الان بر اساس https://www.w3schools.com/css/css3_flexbox.asp و https://www.w3schools.com/css/css_grid.asp ،
flexbox توی مرورگرهای قدیمی هم ساپورت میشه اما grid مرورگر نسبتا جدیدتری میخواد که این ضعف محسوب میشه چون بعضی از کاربران مرورگر بروز ندارن.

میلاد ( 145480 تجربه )
1 هفته پیش
تخصص : طراح رابط کاربری - Front-End

خواهش میکنم، زنده باشید.

در راه حلی که من ارائه دادم، باید یک ارتفاع مشخص رو به خود نگهدارنده content بدم تا ستون های سمت راست و چپ باهم برابر بشن، ولی اگر با css grid پیاده سازی می کردیم، بدون دادن ارتفاع مشخص، این چیدمان قابل پیاده سازی بودش.

میلاد ( 145480 تجربه )
1 هفته پیش
تخصص : طراح رابط کاربری - Front-End

نکته اول اینکه: همانطور که من گفتم، اگر طرح شما پیچیدگی های خاصی داشته باشه، پیاده سازی با css grid کارتون رو ساده تر میکنه.

نکته دوم: این نکته ای که شما ذکر می کنید در خصوص پشتیبانی مرورگرها، بصورت کلی صحیح هستش.
ولی شما نباید این رو یک اصل بدونید بلکه اصل اینه که: مخاطب سایت خودتون رو شناسایی کنید، اگر مخاطبان شما بروز هستند، می تونید از css grid استفاده کنید.
بعلاوه هر قدر زمان میگذره، پشتیبانی بهتری برای css grid رو شاهد خواهیم بود:
https://caniuse.com/#feat=css-grid

میثم ( 1800 تجربه )
1 هفته پیش

اطلاعات خوب و مفیدی بود.
ممنون و متشکرم.

جواد کرمی ( 2205 تجربه )
3 روز پیش
تخصص : توسعه دهنده وب و اپلیکیشن | فرانت اند

سلام دوست عزیز
من خودم همیشه برای گرید بندی صفحه از flexbox استفاده میکنم که خیلی کار رو ساده تر و سریع تر میکنه.
بجز flexbox از cssgrid هم میتونید استفاده کنید. سایتی که این پایین میذارم کار با cssgrid رو خیلی راحت میکنه. فقط کافیه بگید چندتا ستون و ردیف و با چه فاصله ای نیاز دارید خودش کد رو تولید میکنه.
https://cssgr.id/

برای ارسال پاسخ باید وارد سایت شوید