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

- 1 ماه پیش
توسط میلاد آپدیت شد
imaniy ( 1094 تجربه )
1 ماه پیش

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

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

بهترین پاسخ انتخاب شده توسط imaniy
میلاد
1 ماه پیش

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

<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>
میلاد ( 60220 تجربه )
1 ماه پیش

می تونید برای عناصر سمت چپ، ابتدا یک کارت بیرونی قرار بدین، سپس به هر دو کارت کلاس 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 ( 1094 تجربه )
1 ماه پیش

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

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

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

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

میلاد ( 60220 تجربه )
1 ماه پیش

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

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

imaniy ( 1094 تجربه )
1 ماه پیش

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

میلاد ( 60220 تجربه )
1 ماه پیش

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

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

<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>
میلاد ( 60220 تجربه )
1 ماه پیش

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

<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>
imaniy ( 1094 تجربه )
1 ماه پیش

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

میلاد ( 60220 تجربه )
1 ماه پیش

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

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