ধারক উপাদানগুলির শীর্ষে ইনলাইন-ব্লক ডিআইভিগুলি সারিবদ্ধ করুন

Question

যখন দু'জনের inline-block divআলাদা আলাদা উচ্চতা থাকে, তখন কেন দুটিটির সংক্ষিপ্ত পাত্রে শীর্ষে সারিবদ্ধ হয় না? ( ডেমো ):

.container { 
    border: 1px black solid;
    width: 320px;
    height: 120px;    
}

.small {
    display: inline-block;
    width: 40%;
    height: 30%;
    border: 1px black solid;
    background: aliceblue;    
}

.big {
    display: inline-block;
    border: 1px black solid;
    width: 40%;
    height: 50%;
    background: beige;    
}

<div class="container">
    <div class="small"></div>
    <div class="big"></div>
</div>

আমি কীভাবে divতার ধারকটির শীর্ষে ছোটটি সারিবদ্ধ করতে পারি ?

Comments

বা তাদের মতো ভাসা: jsfiddle.net/RHM5L/12

— এও_

একবার দেখুন

— মিঃ এলিয়েন

উল্লম্ব-সারিবদ্ধ প্রয়োগ: শীর্ষ; ছোট ছোট ক্লাসের জন্য

— দীপু

আমি ভাসা ব্যবহার করতে চাই না ধন্যবাদ @ মিঃ অ্যালিয়ান এটি এখন কাজ করে :)

— ইউসুফ

Answer 1

কারণ ডিফল্ট হিসাবে বেসলাইনেvertical-align সেট করা আছে ।

vertical-align:topপরিবর্তে ব্যবহার করুন:

.small{
    display: inline-block;
    width: 40%;
    height: 30%;
    border: 1px black solid;
    background: aliceblue;   
    vertical-align:top;
}

http://jsfiddle.net/Lighty_46/RHM5L/9/

বা @ f00644 হিসাবে যেমন বলা হয়েছে আপনি floatশিশু উপাদানগুলিতেও প্রয়োগ করতে পারেন ।

Comments

যদি আমি ভাসাটি প্রয়োগ করি তবে আমার উচ্চতায় সমস্যা হবে যদি কনটেইনারটিতে কেবল আমার ক্ষেত্রে যেমন ভাসমান শিশু থাকে have এখানে নিবন্ধটি দেখুন

— ইউসুফ

কোনও ধারণা কেন baselineডিফল্ট? আমি নিশ্চিত যে এটির একটি ভাল কারণ আছে, তবে অ-প্রত্যাশার কাছে এটি কেবল অদ্ভুত বলে মনে হয়। আপনি ম্যানহাটনের স্কাইলাইন এফেক্ট দিয়ে শেষ করবেন।

— শ্রীধর সারনোবাত

উল্লম্ব সারিবদ্ধকরণ হরফ প্রান্তিককরণের জন্য ব্যবহৃত হয়, যেহেতু ফন্টগুলির বেসলাইন থাকে তাই এটি কেবলমাত্র যুক্তিযুক্ত যে ডিফল্টটি বেসলাইনে সমাধান করে। এটির মতো অন্যান্য অনুষ্ঠানে আপনার এটিকে ওভাররাইট করতে হবে।

— ceed

Answer 2

vertical-alignআপনার দুটি সন্তানের ডিভ-এ কোনও সম্পত্তি যুক্ত করা দরকার ।

যদি .smallসর্বদা সংক্ষিপ্ত হয় তবে আপনার কেবলমাত্র সম্পত্তিটি প্রয়োগ করতে হবে .small। যাইহোক, যদি পারেন সবচেয়ে লম্বা হতে পারে তারপর আপনি উভয় সম্পত্তি আবেদন করতে হবে .smallএবং .big।

.container{ 
    border: 1px black solid;
    width: 320px;
    height: 120px;    
}

.small{
    display: inline-block;
    width: 40%;
    height: 30%;
    border: 1px black solid;
    background: aliceblue; 
    vertical-align: top;   
}

.big {
    display: inline-block;
    border: 1px black solid;
    width: 40%;
    height: 50%;
    background: beige; 
    vertical-align: top;   
}

উল্লম্ব সারিবদ্ধতা ইনলাইন বা টেবিল-সেল বাক্সগুলিকে প্রভাবিত করে এবং এই সম্পত্তিটির জন্য বিভিন্ন মানের একটি বৃহত নুবার রয়েছে। আরও তথ্যের জন্য দয়া করে https://developer.mozilla.org/en-US/docs/Web/CSS/versical-align দেখুন।

Answer 3

<style type="text/css">
        div {
  text-align: center;
         }

         .img1{
            width: 150px;
            height: 150px;
            border-radius: 50%;
         }

         span{
            display: block;
         }
    </style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type='password' class='secondInput mt-4 mr-1' placeholder="Password">
  <span class='dif'></span>
  <br>
  <button>ADD</button>
</div>

<script type="text/javascript">

$('button').click(function() {
  $('.dif').html("<img/>");

})

Comments

আমি মনে করি কেবল স্প্যানের ডিফল্ট প্রদর্শন বৈশিষ্ট্যগুলি ইনলাইন থেকে ব্লকে পরিবর্তন করা কৌশলটি করবে।

— পবিত্র আত্মাভিজ্ঞান

Answer 4

ওভারফ্লো যুক্ত করুন: কন্টেইনার ডিভেতে অটো। http://www.quirksmode.org/css/cleering.html এই সমস্যাটি থাকার সময় এই ওয়েবসাইটটি কয়েকটি বিকল্প দেখায়।