Ich habe eine div
mit einigen Kindern:
<div class="content">
<h1>heading 1</h1>
<h2>heading 2</h2>
<p>Some more or less text</p>
<a href="/" class="button">Click me</a>
</div>
und ich möchte das folgende Layout:
-------------------
|heading 1 |
|heading 2 |
|paragraph text |
|can have many |
|rows |
| |
| |
| |
|link-button |
-------------------
Unabhängig davon, wie viel Text im Text enthalten ist, p
möchte ich den Text .button
immer ganz unten festhalten, ohne ihn aus dem Fluss zu nehmen. Ich habe gehört, dass dies mit Flexbox erreichbar ist, aber ich kann es nicht zum Laufen bringen.
postition: absolute; bottom 0;
?position:relative
- es ist doof, weil ich denke, dass es standardmäßig relativ ist, aber Sie haben es SET, damit die absolute Positionierung des Kindes enthalten ist. Dannbottom:0
passt bündig.static
nichtrelative
.Antworten:
Sie können automatische Ränder verwenden
Sie können also eine davon (oder beide) verwenden:
Code-Snippet anzeigen
Alternativ können Sie das Element vor dem
a
Wachsen erstellen, um den verfügbaren Platz zu füllen:Code-Snippet anzeigen
quelle
html { height: 100%; } body { min-height: 100%; display: flex; flex-direction: column; } #site-content { flex: 1; }
height: 100%
auf das übergeordnete Element , von dem Sie auf Push etwas nach unten versuchen , mitmargin-top: auto;
Sie können display: flex verwenden, um ein Element nach unten zu positionieren, aber ich glaube nicht, dass Sie in diesem Fall flex verwenden möchten, da dies alle Ihre Elemente betrifft.
Um ein Element mit Flex nach unten zu positionieren, versuchen Sie Folgendes:
Am besten setzen Sie die Position: absolut auf den Button und setzen Sie sie auf
bottom: 0
, oder Sie können den Button außerhalb des Containers platzieren und das Negativ verwendentransform: translateY(-100%)
, um ihn wie folgt in den Container zu bringen:Überprüfen Sie diese JSFiddle
quelle
Die Lösung mit
align-self: flex-end;
hat bei mir nicht funktioniert, aber diese hat funktioniert, falls Sie flex verwenden möchten:Ergebnis
Code
Hinweis: Wenn Sie das Code-Snippet ausführen, müssen Sie nach unten scrollen, um den Link unten zu sehen.
quelle
Sie sind sich bei Flexbox nicht sicher, können dies jedoch mithilfe der Positionseigenschaft tun.
setze übergeordnetes
div
position: relative
und untergeordnetes Element, das ein<p>
oder<h1>
etc sein kann. setzeposition: absolute
undbottom: 0
.Beispiel:
index.html
style.css
Codestift hier.
quelle
position:fixed
würde nicht funktionieren, weil es dann nicht relativ zu dem Container wäre, in dem es sich befindet. Vielleicht meinten Sie dasposition:absolute
?Demo: https://codepen.io/ferittuncer/pen/YzygpWX
quelle
Wenn Sie Ihre Anzeige auf Flex einstellen , können Sie einfach die
flex
Eigenschaft verwenden, um zu markieren, welcher Inhalt wachsen kann und welcher nicht.Flex-Eigenschaft
quelle
Versuche dies
quelle
Ich habe gerade eine Lösung dafür gefunden.
Wer mit den gegebenen Antworten nicht zufrieden ist, kann diesen Ansatz mit flexbox ausprobieren
CSS
HTML
quelle