Alinierea DIV-urilor inline-block la partea de sus a elementului container (Programare, Css)

Youssef a intrebat.

Atunci când două inline-block divs au înălțimi diferite, de ce nu se aliniază cel mai scurt dintre cele două la partea de sus a containerului? (DEMO):

Cum pot alinia cea mai mică div în partea de sus a containerului său?

Comentarii

  • sau să le fac să plutească astfel: jsfiddle.net/RHM5L/12 –  > Por AO_.
  • Aruncați o privire –  > Por Domnul Alien.
  • aplicați vertical-align:top; pentru clasa .small –  > Por Deepu Sasidharan.
  • nu vreau să folosesc float. mulțumesc @Mr.Alien acum funcționează 🙂 –  > Por Youssef.
4 răspunsuri
Lighty_46

Deoarece vertical-align este setat la linia de bază în mod implicit.

Utilizați vertical-align:top în loc:

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

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

Sau, așa cum a spus @f00644, puteți aplica float și la elementele copil.

Comentarii

  • Dacă aplic float voi avea o problemă în înălțime dacă containerul are doar copii float ca în cazul meu. Aruncați o privire aici articolul –  > Por Youssef.
  • Orice idee de ce baseline este implicit? Sunt sigur că există un motiv întemeiat, dar pentru un non-expectativ pare ciudat. Te trezești cu un efect de orizont din Manhattan. –  > Por Sridhar Sarnobat.
  • Vertical align este folosit pentru alinierea fonturilor, din moment ce fonturile au linie de bază, este logic ca valoarea implicită să se rezolve la linia de bază. În alte ocazii, cum ar fi aceasta, trebuie să o suprascrieți. –  > Por ceed.
michaelward82

Trebuie să adăugați un vertical-align proprietate la cele două div-uri copil.

Dacă .small este întotdeauna mai scurt, trebuie doar să aplicați proprietatea la .small.totuși, dacă oricare dintre ele ar putea fi cea mai înaltă, atunci trebuie să aplicați proprietatea la ambele .small și .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;   
}

Vertical align (aliniere verticală) afectează casetele de tip inline sau table-cell și există un număr mare de valori diferite pentru această proprietate. Vă rugăm să consultați https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align pentru mai multe detalii.

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

})

Comentarii

  • Cred că simpla schimbare a proprietăților implicite de afișare a unui span din inline în block va rezolva problema. –  > Por holyghostgym.
Kbaugh

Adăugați overflow: auto la div-ul container. http://www.quirksmode.org/css/clearing.html Acest site arată câteva opțiuni atunci când aveți această problemă.

Tags: