2013-06-28 3 views
9

Ho una lista non ordinata in stile da visualizzare orizzontalmente. Uno degli elementi li contiene un elemento div. Questo elemento div viene riempito usando ajax, sebbene non dovrebbe avere importanza.Allinea div con la parte superiore di un contenitore

L'elemento div ha un'altezza maggiore rispetto al resto degli elementi li e per impostazione predefinita si allinea con il fondo del contenitore padre.

Aggiornamento: Beh, non è così imbarazzante. Ho codificato un esempio più semplice in jsfiddle http://jsfiddle.net/Bfp3K/ e funziona correttamente. Devo controllare di nuovo il mio codice per ottenere l'errore nella sandbox.

Update2: Dopo tutto non è stato così facile. Ho aggiunto la mia soluzione proposta (e usata).

Update3: Ignora la risposta precedente, non era corretta. Questo è un esempio semplificato e verificabile del problema:

JSFiddle: http://jsfiddle.net/Bfp3K/10/

CSS:

#one { 
    background-color:red; 
} 
#two { 
    background-color:green; 
} 
#three { 
    background-color:yellow; 
} 
#four { 
    background-color:blue; 
} 
.normal { 
    height:100px; 
    width:200px; 
    display:inline-block; 

} 
.big { 
    height:200px; 
    width:300px; 
    display:inline-block; 
} 

ul { 
    display:block; 
} 

ul li{ 
    display:inline; 
} 

HTML:

<ul> 

<li><div id="one" class="normal">One</div></li> 
<li><div id="two" class="normal">Two</div></li> 
<li><div id="three" class="normal">Three</div></li> 
<li><div id="four" class="big"> 
    The last div vertically aligns to it's content's last line of text. I want to align the top of all the colored divs. 

</div></li> 
</ul> 

Immagini:

Che la soluzione dovrebbe aspetto: Accetable solution Quello che il problema si presenta come: Current Problem

+3

è possibile caricare alcune html e css corrente per favore? – LazerSharks

+0

Nessun codice, non può aiutare ... – Terry

+0

Bello. Puoi sempre rispondere alla tua domanda haha ​​ – LazerSharks

risposta

9

Basta sostituire le dichiarazioni display:inline-block; con float:left; Poiché si specifica comunque le dimensioni, non è necessario inline-block. Il jsFiddle funziona ed ecco una foto. enter image description here

.normal { 
    height:100px; 
    width:200px; 
    float:left;} 

.big { 
    height:200px; 
    width:300px; 
    float:left;} 
+2

Mentre questo risolve il problema in jsfiddle, nel mio progetto la maggior parte delle div sono dinamiche e non hanno dimensioni specifiche. – GCon

+0

Bene se rimuovi le dimensioni specifiche da jsFiddle, otterrai comunque lo stesso risultato: tutti i piani superiori allineati. Inoltre, quando fai una domanda, aiuta ad includere ogni aspetto che si applica. – frenchie

+0

Ciao! Grazie per il tuo tempo :) Prima avevo un codice complesso, basato sul codice che ho usato. Non è stato possibile inserire il codice perché fa parte di un'applicazione Web tomcat. Puoi commentare l'uso di vertical-align: top invece di float: left? Sembra funzionare, ma temo che l'aggiunta del codice possa avere effetti collaterali. (È ovvio che ho appena iniziato lo sviluppo web) – GCon

1

Impostare del LI line-height alla stessa altezza pixel dell'immagine.

+0

Ho provato prima questo, perché era il più semplice da testare. Quando il div contiene solo un collegamento (accedi), viene visualizzato più in basso rispetto agli altri elementi. Dopo aver creato un test su jsfiddle, vedo che il comportamento predefinito è quello che sto cercando - e ho rotto questo comportamento con un po 'del mio codice. Non riesco a trovare quello che potrebbe causarlo. – GCon

+0

Puoi pubblicare il tuo codice su JSFiddle o qualcosa di simile? –

+0

Il mio codice è basato su tomcat. Proverò a salvare una versione firmata e firmata e a caricare i link. Grazie per il vostro aiuto! – GCon

0

Soluzione 1 (veloce e sporco): impostare un margin-bottom: [negative value here] o bottom: [negative value here] se il li sono posizionati in modo relativo e il div è posizionato in modo assoluto. Questo presuppone che tu conosca i valori esatti.

Soluzione 2: Suppongo che il testo negli altri elementi sia link. Set padding superiore e inferiore per quei link (in particolare i <a> tag, in modo che essi sono allineati verticalmente al centro)

Soluzione 3 (un po 'più HTML): Metti due div in ogni li. Avvolgi il div che hai già in un altro div. Usa il metodo di centratura verticale (come il metodo tabel-cell) per centrare verticalmente tutte le div interne. http://www.jakpsatweb.cz/css/css-vertical-center-solution.html (I li tag che già avete potrebbero già funzionare come l'involucro div esterno, ma non sono sicuro, non ho avuto tempo di provare ancora.)

2

aggiornato (bottom-allineati):

<html> 
<head> 
<style> 
li { 
    display:inline-block; 
} 
.item { 
    vertical-align: bottom; 
} 
</style> 
</head> 
<body> 
<ul> 
    <li>Text 1</li> 
    <li><div class="item">Text 2<img src="some.jpg"/></div></li> 
    <li>Text 3</li> 
</ul> 
</body> 
</html> 
+0

Come sta cambiando la lista in div andando a risolvere qualcosa? – cimmanon

+0

tutti i testi sarebbero allineati in alto – kikudjiro

+0

Questo, in effetti ha funzionato, cambiando semplicemente l'allineamento verticale: dal basso all'allineamento verticale: in alto. Da quello che ho capito, questa è una cattiva pratica se usata su elementi non di tabella. – GCon

0

Nel codice pubblicato nella domanda i LI hanno visualizzato: inline, e nell'esempio più semplice di jsfiddle la loro visualizzazione viene reimpostata su blocco in linea (tramite classi). Il blocco in linea è diverso da quello in linea che isola qualsiasi contenuto a livello di blocco (come i DIV) all'interno, mentre il tentativo di mettere qualcosa a livello di blocco in linea fa sì che l'elemento in linea si spezzi in diversi cosiddetti anonymous block boxes. Può essere questa la ragione?

7

La soluzione è stata molto semplice, dopo tutto. Sulla base di un'altra risposta:

li div{ 
    vertical-align:top; 

} 

Poiché gli elementi hanno display: inline-block;, aggiungendo vertical-align: top sembra risolverlo. Non contrassegnerò questo come la soluzione nel caso questa non sia la soluzione corretta.

http://jsfiddle.net/dv3Mm/