Sejajarkan DIV-blok inline ke atas elemen kontainer

199

Ketika dua inline-block divs memiliki ketinggian yang berbeda, mengapa yang lebih pendek dari keduanya tidak sejajar dengan bagian atas wadah? ( 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>
Luaskan cuplikan

Bagaimana saya bisa menyelaraskan yang kecil divdi bagian atas wadahnya?

css Youssef
sumber
atau apung mereka seperti itu: jsfiddle.net/RHM5L/12
AO_
Coba lihat
Tn. Alien
1
terapkan vertical-align: top; untuk kelas
.small
1
saya tidak ingin menggunakan float. thanks @ Mr.Alien berfungsi sekarang :)
Youssef

Jawaban:

347

Karena vertical-aligndiatur pada baseline sebagai default.

Gunakan vertical-align:topsebaliknya:

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

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

Atau seperti yang dikatakan @ f00644 , Anda dapat menerapkan floatelemen anak juga.

Lighty_46
sumber
Jika saya menerapkan float saya akan memiliki masalah ketinggian jika wadah baru saja mengapung anak-anak seperti dalam kasus saya. Lihatlah artikel di
Youssef
1
Adakah yang tahu mengapa baselinestandarnya? Saya yakin ada alasan yang bagus, tetapi bagi yang tidak berharap itu sepertinya aneh. Anda berakhir dengan efek skyline Manhattan.
Sridhar Sarnobat
Perataan vertikal digunakan untuk perataan font, karena font memiliki garis dasar, hanya logis bahwa defaultnya ditetapkan ke garis dasar. Dalam kesempatan lain seperti ini, Anda harus menimpanya.
ceed
25

Anda perlu menambahkan vertical-alignproperti ke div dua anak Anda.

Jika .smallselalu lebih pendek, Anda hanya perlu menerapkan properti .small. Namun, jika salah bisa menjadi tertinggi maka Anda harus menerapkan properti untuk kedua .smalldan .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;   
}

Perataan vertikal memengaruhi inline atau kotak-sel kotak, dan ada sejumlah besar nilai yang berbeda untuk properti ini. Silakan lihat https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align untuk perincian lebih lanjut.

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

})
holyghostgym
sumber
Saya pikir hanya mengubah properti tampilan default rentang dari inline ke block akan melakukan trik.
holyghostgym