مرتب کردن Div مثل تصویر زیر
سلام.
ببخشید شاید سوالم مبتدی باشه.
امروز کلا هنگ کردم!!!
اگه بخوایم 3 تا DIV رو مثل تصویر پایین بچینیم کدش چی میشه؟؟؟؟
تصویر سمت چپ نسخه دسکتاپ . سمت راست موبایل
http://s7.picofile.com/file/8391943526/Untitled_2.png
پاسخ‌ها
7
<!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>راه حل بهترش هم اینه که بجای flexbox عمودی، با css grid این چیدمان رو پیاده سازی کنید.
سلام @milad عزیز.
خیلی ممنونم.
کارم راه افتاد.
فقط یه سوال :
چطور به این اعتقاد دارین؟
راه حل بهترش هم اینه که بجای flexbox عمودی، با css grid این چیدمان رو پیاده سازی کنید.
الان بر اساس https://www.w3schools.com/css/css3_flexbox.asp و https://www.w3schools.com/css/css_grid.asp ،
flexbox توی مرورگرهای قدیمی هم ساپورت میشه اما grid مرورگر نسبتا جدیدتری میخواد که این ضعف محسوب میشه چون بعضی از کاربران مرورگر بروز ندارن.
گفتگوهای مرتبط
شاید پاسخ شما همین‌جا باشد
خواهش میکنم، زنده باشید.
در راه حلی که من ارائه دادم، باید یک ارتفاع مشخص رو به خود نگهدارنده content بدم تا ستون های سمت راست و چپ باهم برابر بشن، ولی اگر با css grid پیاده سازی می کردیم، بدون دادن ارتفاع مشخص، این چیدمان قابل پیاده سازی بودش.
نکته اول اینکه: همانطور که من گفتم، اگر طرح شما پیچیدگی های خاصی داشته باشه، پیاده سازی با css grid کارتون رو ساده تر میکنه.
نکته دوم: این نکته ای که شما ذکر می کنید در خصوص پشتیبانی مرورگرها، بصورت کلی صحیح هستش.
ولی شما نباید این رو یک اصل بدونید بلکه اصل اینه که: مخاطب سایت خودتون رو شناسایی کنید، اگر مخاطبان شما بروز هستند، می تونید از css grid استفاده کنید.
بعلاوه هر قدر زمان میگذره، پشتیبانی بهتری برای css grid رو شاهد خواهیم بود:
https://caniuse.com/#feat=css-grid
اطلاعات خوب و مفیدی بود.
ممنون و متشکرم.
سلام دوست عزیز
من خودم همیشه برای گرید بندی صفحه از flexbox استفاده میکنم که خیلی کار رو ساده تر و سریع تر میکنه.
بجز flexbox از cssgrid هم میتونید استفاده کنید. سایتی که این پایین میذارم کار با cssgrid رو خیلی راحت میکنه. فقط کافیه بگید چندتا ستون و ردیف و با چه فاصله ای نیاز دارید خودش کد رو تولید میکنه.
https://cssgr.id/