Align div mit der Oberseite eines Containers

Ich habe eine ungeordnete Liste formatiert, um horizontal anzuzeigen. Eines der li-Elemente enthält ein div-Element. Dieses div-Element wird mit Ajax gefüllt, obwohl es nicht wichtig sein sollte.Align div mit der Oberseite eines Containers

Das div-Element hat eine größere Höhe als der Rest der li-Elemente und ist standardmäßig am unteren Rand des übergeordneten Containers ausgerichtet.

Update: Nun, ist das nicht peinlich. Ich codierte ein einfacheres Beispiel in jsfiddle http://jsfiddle.net/Bfp3K/, und es funktioniert ordnungsgemäß. Ich muss meinen Code erneut überprüfen, um den Fehler in der Sandbox zu erhalten.

Update2: Es war schließlich nicht so einfach. Ich habe meine vorgeschlagene (und verwendete) Lösung hinzugefügt.

Update3: Missachten Sie die vorherige Antwort, es war nicht korrekt. Dies ist eine vereinfachte und testbar Beispiel für das Problem:

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>

Bilder:

Was die Lösung sollte aussehen wie: Accetable solution Was ist das Problem wie folgt aussieht: Current Problem

Quelle

2013-06-28 GCon

können Sie einige Ihrer aktuellen HTML und CSS schreiben bitte? – LazerSharks

Kein Code, kann nicht helfen ... – Terry

Nizza. Sie können immer Ihre eigene Frage beantworten haha – LazerSharks

Ersetzen Sie einfach die display:inline-block; Deklarationen mit float:left; Da Sie sowieso die Dimensionen angeben, brauchen Sie inline-block nicht. Die jsFiddle funktioniert und hier ist ein Bild. enter image description here

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

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

Quelle

2013-06-29 01:23:24 frenchie

Während dies das Problem in Jfiddle löst, sind in meinem Projekt die meisten divs dynamisch und haben keine spezifischen Dimensionen. – GCon

Nun, wenn Sie die spezifischen Dimensionen aus dem jsFiddle entfernen, erhalten Sie immer noch das gleiche Ergebnis: alle Oberseiten ausgerichtet. Auch wenn Sie eine Frage stellen, hilft es, jeden Aspekt mit einzubeziehen. – frenchie

Hallo! Danke für deine Zeit :) Ich hatte vorher einen komplexen Code, basierend auf dem Code, den ich benutzt habe. Ich konnte den Code nicht veröffentlichen, da er Teil einer Tomcat-Webanwendung ist. Könnten Sie die Verwendung von vertical-align kommentieren: top statt float: links? Es scheint zu funktionieren, aber ich befürchte, dass das Hinzufügen des Codes Nebenwirkungen haben könnte. (Es ist offensichtlich, dass ich gerade begonnen Web-Entwicklung) – GCon

den line-height des LI auf die gleiche Pixelhöhe des Bildes.

Quelle

2013-06-28 20:31:37

Ich versuchte dies zuerst, weil es am einfachsten war zu testen. Wenn das div nur einen Link enthält (anmelden), wird es niedriger als die anderen Elemente angezeigt. Nach dem Erstellen eines Tests auf Jsfiddle, sehe ich, dass das Standardverhalten ist, was ich suche - und habe dieses Verhalten mit etwas von meinem Code gebrochen. Ich kann nicht finden, was es verursachen könnte. – GCon

Können Sie Ihren Code auf JSFiddle oder ähnlichem posten? –

Mein Code ist auf Tomcat basiert. Ich werde versuchen, eine abgemeldete und unterschriebene Version zu speichern und Links hochzuladen. Danke für Ihre Hilfe! – GCon

Lösung 1 (quick and dirty): setzen einen margin-bottom: [negative value here] oder bottom: [negative value here] wenn Ihr li relativ positioniert sind und die div positioniert ist absolut. Dies setzt voraus, dass Sie genaue Werte kennen.

Lösung 2: Ich nehme an, dass der Text in den anderen Elementen Links sind. Set oben und unten padding auf diese Verbindungen (insbesondere die <a> Tags, so dass sie sich in der Mitte vertikal ausgerichtet)

Lösung 3 (etwas mehr HTML): Bring zwei divs in jedem li. Wickeln Sie das Div, das Sie bereits haben, erneut in ein anderes Div auf. Verwenden Sie die vertikale Zentrierungsmethode (z. B. die Tabellenzellmethode), um alle inneren Divs vertikal zu zentrieren. http://www.jakpsatweb.cz/css/css-vertical-center-solution.html (Die li Tags, die Sie vielleicht schon bereits arbeiten als äußere div wickeln, aber ich bin nicht sicher, nicht bekommen, dass noch zu testen.)

Quelle

2013-06-28 20:36:57 LazerSharks

aktualisiert (bottom-aligned):

<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>

Quelle

2013-06-28 20:44:11 kikudjiro

Wie ändert sich die Liste in divs alles lösen? – cimmanon

alle Texte wären oben ausgerichtet – kikudjiro

Dies funktionierte tatsächlich, nur durch Ändern der vertikalen Ausrichtung: unten zu vertikal ausrichten: oben. Von dem, was ich verstehe, ist dies eine schlechte Übung, wenn es auf Nicht-Tabellen-Elementen verwendet wird. – GCon

In dem in der Frage geposteten Code haben die LIs display: inline, und im jsfiddle 'simplere example' wird ihre Anzeige auf Inline-Block (über Klassen) zurückgesetzt. Inline-Block unterscheidet sich von Inline dadurch, dass es jeden Inhalt auf Blockebene (wie DIVs) isoliert, während der Versuch, etwas Block-Level in Inline zu schreiben, das Inline-Element in mehrere so genannte anonymous block boxes zerlegt. Vielleicht ist das der Grund?

Quelle

2013-06-28 21:23:27

Die Lösung war sehr doch einfach. Basierend auf einer anderen Antwort:

li div{ 
    vertical-align:top; 

}

Da die Elemente haben display: inline-block;, Hinzufügen von vertikal-Ausrichtung: oben scheint es zu lösen. Ich werde dies nicht als Lösung bezeichnen, falls dies nicht die richtige Lösung ist.

http://jsfiddle.net/dv3Mm/

Quelle

2013-06-29 01:29:57 GCon

Align div mit der Oberseite eines Containers

Antwort

Verwandte Themen