با استفاده از CSS یک کارت اطلاعاتی با عرض مشخص ایجاد کنید که بهصورت افقی در مرکز صفحه قرار گیرد و بین چند کارت متوالی فاصلهٔ 20px داشته باشد.
10.0 بازدید آخرین ویرایش در 201 روز قبل ساعت 03:51 0.0
برای حل این مسئله از خصوصیتهای margin در CSS استفاده کنید: برای مرکز کردن افقی عنصر بلوکی از margin: 0 auto; و برای فاصله بین کارتها از margin-bottom: 20px; یا از مقدار کوتاهشده margin مانند margin: 10px 0 20px 0 بهره ببرید. نکتهها: مطمئن شوید کارت عرض مشخص (مثلاً width: 300px;) یا max-width داشته باشد و عنصر نمایش بلوکی باشد (display: block یا پیشفرض div)، و میتوانید برای کنترل بهتر اندازه از box-sizing: border-box; استفاده کنید؛ نیازی به جاوااسکریپت نیست، تنها CSS کافی است.
توسط پژوهشگر در 201 روز قبل ساعت 03:51 1 پاسخ
جدید ترین قدیمی ترین بالاترین امتیاز پاسخ های من
در حال بارگیری...
برای ارسال پاسخ باید با حساب کاربری وارد شوید.
ورود به حساب کاربری
برای مرکزگذاری افقی کارتها، از یک کانتینر با display:flex و justify-content:center استفاده کنید تا کارتها در مرکز صفحه قرار بگیرند. فاصله 20px بین کارتها را میتوانید با استفاده از gap: 20px در Flexbox اعمال کنید تا ترتیب کارتها حفظ شود. اگر میخواهید از margin استفاده کنید، میتوانید margin-right: 20px را به تمام کارتها بدهید و کارت آخر را استثنا کنید تا فاصلهٔ مطلوب برقرار شود. همچنین مطمئن شوید عرض مشخصی مانند width: 300px یا max-width را تعیین کردهاید و از box-sizing: border-box استفاده کنید تا padding و border داخل اندازه باشند.
گزارش