จัด DIV แบบอินไลน์บล็อกให้อยู่ด้านบนขององค์ประกอบคอนเทนเนอร์

เมื่อทั้งสอง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ที่ด้านบนของคอนเทนเนอร์ได้อย่างไร

เพราะ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ไปใช้กับองค์ประกอบย่อยได้เช่นกัน

คุณต้องเพิ่มvertical-alignคุณสมบัติให้กับ div ลูกสองของคุณ

หาก.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สำหรับรายละเอียดเพิ่มเติม

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

})

เพิ่มล้น: อัตโนมัติเพื่อ div คอนเทนเนอร์ http://www.quirksmode.org/css/clearing.htmlเว็บไซต์นี้แสดงตัวเลือกบางอย่างเมื่อมีปัญหานี้