css - tutorial - w3schools sql




ধারক উপাদান শীর্ষে ইনলাইন ব্লক DIV সংলগ্ন (3)

আপনি আপনার দুই সন্তানের DIV একটি vertical-align সম্পত্তি যোগ করার প্রয়োজন।

যদি .small সর্বদা ছোট হয় তবে আপনাকে শুধুমাত্র সম্পত্তির জন্য .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/vertical-align দেখুন।

যখন দুটি inline-block div বিভিন্ন উচ্চতা থাকে, তখন কেন দুটি ছোট ছোট কন্টেইনারে সারিবদ্ধ হয় না? ( DEMO ):

.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 সারিবদ্ধ করতে পারেন?


ওভারফ্লো যোগ করুন: ধারক DIV স্বয়ংক্রিয়। http://www.quirksmode.org/css/clearing.html এই সমস্যাটি থাকার সময় এই ওয়েবসাইটটি কয়েকটি বিকল্প দেখায়।


<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/>");

})






css