راکت
حل شده

هم‌تراز شدن دیو ها با یکدیگر

8 پاسخ

سلام من باید چیکار کنم دیوهایی که کنار هم هستن در هر سایز صفحه ای با هم یکسان باشن؟
به عکس زیر توجه کنید میخام این دو کادر همیشه از نطر ارتفاع یکسان باشن! از بوت استرپ هم استفاده میکنم.

http://uupload.ir/files/z9ix_img_20190523_170131_206.jpg

ثبت پرسش جدید

پاسخ‌ها

8
میلاد-م
میلاد-م
@milad

تخصص: توسعه‌دهنده رابط کاربری - Front-End

بهترین پاسخ

در راهکار دوم به کلاس هایی که در این دو خط اضافه شده اند دقت کنید:

<form class="mt-md-4 mt-2 wow jackInTheBox h-100 d-flex flex-column">
و
<textarea class="form-control mb-3 flex-grow-1" id="cmnt" placeholder="پیام شما*""></textarea>
میلاد-م
میلاد-م
@milad

تخصص: توسعه‌دهنده رابط کاربری - Front-End

می تونید برای عناصر سمت چپ، ابتدا یک کارت بیرونی قرار بدین، سپس به هر دو کارت کلاس h-100 رو اضافه کنید. هم ارتفاع می شوند.

کدها برای بوت استرپ:

<section id="contact">
        <div class="container">
            <div class="row">

                <div class="col-lg-6 mb-3">
                    <div class="card h-100">
                       بدنه بخش راستی
                    </div>
                </div>

               <div class="col-lg-6">
                    <div class="card h-100">
                       بدنه بخش چپی
                    </div>
                </div>
          </div>
     </div>
</section>
imaniy
imaniy
@imaniy

تخصص: طراح وب

دوست عزیز @milad این روش خیلی خوب بود ولی نمیدونم چرا مشکلم رو حل نکرد اگه به عکس زیر توجه کنید کمی بهترش کرد ولی خوب نشد بازم :

https://www.imgurl.ir/uploads/k69943_.jpg

راهی هست که بگم کادر سمت چبی اون بخش وارد کردن (پیام شما) بزرگتر بشه تا هم سایز دیو سمت راستی ببشه؟ کدم رو زیر گذاشتم ممنون از راهنماییتون این مشکل خیلی رو مخه.

https://jsbin.com/munotereba/edit?html,output

شاید پاسخ شما همین‌جا باشد

میلاد-م
میلاد-م
@milad

تخصص: توسعه‌دهنده رابط کاربری - Front-End

در راهکاری که من خدمتتون عرض کردم، شما باید عناصر سمت چپ رو درون یک کارت بزارید و به اون ارتفاع 100 رو بدین.
اینجوری یک قاب برای عناصر سمت چپ ایجاد میشه و ظاهرش متفاوت به چشم میاد.

کدهایی که قرار دادین رو کامل بزارید، کدهای html هستند، شامل css نمیشه، کدهای css رو هم قرار بدین.

imaniy
imaniy
@imaniy

تخصص: طراح وب

پس برای اینکار وجود یک card ضروری هست؟ الان مشکل رو حل کردم ممنون ولی یه مشکلی هست h-100 که میدی سایز خیلی بزرگتر از حد فعلی خودش میشه.
امیدوار بودم مثل عرض ها که فلکس باکس ها مشکل رو حل میکنن برای ارتفا هم راه آسونی در نظر گرفته باشن!
@milad

میلاد-م
میلاد-م
@milad

تخصص: توسعه‌دهنده رابط کاربری - Front-End

نه ضروری نیستش. یک راهکار بود که ارائه دادم، راه های مختلفی وجود داره.

این هم راهکار دیگری:

<form class="mt-md-4 mt-2 wow jackInTheBox h-100 d-flex flex-column">
          <div class="row">
            <label class="sr-only" for="inlineFormInputGroupUsername2">name</label>
            <div class="input-group mb-2 mr-sm-2 col-md-6 col-sm-12">
              <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="نام و نشان*">
            </div>

            <label class="sr-only" for="inlineFormInputGroupUsername2">mail</label>
            <div class="input-group mb-2 mr-sm-2 col-md-6 col-sm-12">
              <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="آدرس ایمیل*">
            </div>
          </div>

          <div class="row">
            <label class="sr-only" for="inlineFormInputGroupUsername2">number</label>
            <div class="input-group mb-2 mr-sm-2 col-md-6 col-sm-12">
              <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="شماره تماس*">
            </div>

            <label class="sr-only" for="inlineFormInputGroupUsername2">web</label>
            <div class="input-group mb-2 mr-sm-2 col-md-6 col-sm-12">
              <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="آدرس سایت">
            </div>
          </div>
          <textarea class="form-control mb-3 flex-grow-1" id="cmnt" placeholder="پیام شما*""></textarea>

          <button class="btn btn-primary text-white">ارسال</button>

        </form>
imaniy
imaniy
@imaniy

تخصص: طراح وب

خیلی خیلی خیلی تشکر میکنم :)

میلاد-م
میلاد-م
@milad

تخصص: توسعه‌دهنده رابط کاربری - Front-End

@imaniy
خواهش می کنم، سرزنده باشید.
همانطور که دیدید از خصوصیت flex استفاده کردم، خیلی راهگشا هستش.

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام