Wie bringe ich ein Div dazu, auf den Boden seines Containers zu schweben?

Ich habe Bilder und eingefügte Kästchen mit float: rechts (oder links) viele Male oben in einem Container schweben lassen. Kürzlich habe ich die Notwendigkeit festgestellt, ein Div in der unteren rechten Ecke eines anderen Div mit dem normalen Textumbruch zu schweben, den Sie mit float erhalten (Text nur oben und links umbrochen).

Ich dachte, dass dies relativ einfach sein muss, obwohl float keinen unteren Wert hat, aber ich war nicht in der Lage, dies mit einer Reihe von Techniken zu tun, und das Durchsuchen des Webs hat nichts anderes als die Verwendung der absoluten Positionierung ergeben, aber dies ist nicht der Fall Geben Sie das richtige Zeilenumbruchverhalten an.

Ich hatte gedacht, dass dies ein sehr verbreitetes Design sein würde, aber anscheinend ist es nicht so. Wenn niemand einen Vorschlag hat, muss ich meinen Text in separate Felder aufteilen und das div manuell ausrichten, aber das ist ziemlich prekär und ich würde es hassen, es auf jeder Seite tun zu müssen, die es benötigt.

EDIT: Nur eine Notiz für jeden, der hierher kommt. Die oben als Duplikat verlinkte Frage ist in der Tat kein Duplikat. Die Anforderung, dass Text um das eingefügte Element gewickelt wird, macht es völlig anders. Tatsächlich macht die Antwort auf die Antwort mit der höchsten Abstimmung hier deutlich, warum die Antwort in der verknüpften Frage als Antwort auf diese Frage falsch ist. Auf jeden Fall scheint es immer noch keine allgemeine Lösung für dieses Problem zu geben, aber einige der hier und in der verknüpften Frage veröffentlichten Lösungen funktionieren möglicherweise für bestimmte Fälle.

Setzen Sie das übergeordnete Div auf position: relative, dann das innere Div auf ...

position: absolute; 
bottom: 0;

... und los geht's :)

Eine Möglichkeit, es zum Laufen zu bringen, ist die folgende:

• Schweben Sie Ihre Elemente wie gewohnt nach links

• Drehen Sie das übergeordnete Div mit um 180 Grad

  -moz-transform:rotate(180deg);
  -webkit-transform:rotate(180deg);
  -o-transform:rotate(180deg);
  -ms-transform:rotate(180deg);
  filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);

  JSfiddle: http://jsfiddle.net/wcneY/

• Drehen Sie nun alle Elemente, die nach links schweben (geben Sie ihnen eine Klasse), um 180 Grad, um sie wieder gerade zu platzieren. Voila! sie schweben nach unten.

Nachdem ich einige Tage mit verschiedenen Techniken gekämpft habe, muss ich sagen, dass dies unmöglich erscheint. Selbst mit Javascript (was ich nicht tun möchte) scheint es nicht möglich zu sein.

Zur Verdeutlichung für diejenigen, die es vielleicht nicht verstanden haben - das ist es, wonach ich suche: Beim Veröffentlichen ist es durchaus üblich, einen Einschub (Bild, Tabelle, Abbildung usw.) so zu gestalten, dass sein unteres Ende mit dem unteren Ende des letzten übereinstimmt Textzeile eines Blocks (oder einer Seite) mit Text, der auf natürliche Weise über und rechts oder links um den Einschub fließt, je nachdem, auf welcher Seite der Seite sich der Einschub befindet. In HTML / CSS ist es trivial, den Float-Stil zu verwenden, um den oberen Rand eines Einschubs mit dem oberen Rand eines Blocks auszurichten. Zu meiner Überraschung scheint es jedoch unmöglich zu sein, den unteren Rand des Textes und des Einschubs auszurichten, obwohl dies eine häufige Layoutaufgabe ist .

Ich denke, ich muss die Designziele für diesen Artikel überdenken, es sei denn, jemand hat einen Last-Minute-Vorschlag.

Ich habe dies in JQuery erreicht, indem ich ein Strebenelement mit einer Breite von Null über dem Schwimmer rechts platziert und dann die Strebe (oder das Rohr) entsprechend der Größe des Elternteils abzüglich der Größe des schwebenden Kindes dimensioniert habe.

Bevor js eintritt, verwende ich den Positions-Absolut-Ansatz, der funktioniert, aber einen Textfluss hinter sich lässt. Deshalb wechsle ich in die statische Position, um den Strebenansatz zu ermöglichen. (Header ist das übergeordnete Element, Cutout ist das, was ich unten rechts haben möchte, und Pipe ist meine Strebe)

$("header .pipe").each(function(){
    $(this).next(".cutout").css("position","static");       
    $(this).height($(this).parent().height()-$(this).next(".cutout").height());                                                 
});

CSS

header{
    position: relative; 
}

header img.cutout{
    float:right;
    position:absolute;
    bottom:0;
    right:0;
    clear:right
}
header .pipe{
    width:0px; 
    float:right

}

Die Pipe muss zuerst kommen, dann der Ausschnitt, dann der Text in der HTML-Reihenfolge.

Dadurch wird am unteren Rand der Seite ein festes Div eingefügt und beim Scrollen nach unten am unteren Rand fixiert

#div {
    left: 0;
    position: fixed;
    text-align: center;
    bottom: 0;
    width: 100%;
}

Fügen Sie das div in ein anderes div ein und setzen Sie den Stil des übergeordneten div auf position:relative;Dann setzen Sie auf dem untergeordneten div die folgenden CSS-Eigenschaften:position:absolute; bottom:0;

Wenn Sie damit einverstanden sind, dass nur die unterste Zeile des Textes zur Seite des Blocks geht (im Gegensatz zu vollständig um und unter dem Block, was Sie nicht tun können, ohne den Block zu beenden und einen neuen zu beginnen), ist dies der Fall Es ist nicht unmöglich, einen Block in eine der unteren Ecken eines übergeordneten Blocks zu schweben. Wenn Sie einen Inhalt in ein Absatz-Tag innerhalb eines Blocks einfügen und einen Link in die untere rechte Ecke des Blocks verschieben möchten, fügen Sie den Link in den Absatzblock ein und setzen Sie ihn auf float: right. Fügen Sie dann ein div-Tag mit clear ein : Beide werden direkt unter dem Ende des Absatz-Tags gesetzt. Das letzte Div besteht darin, sicherzustellen, dass das übergeordnete Tag die schwebenden Tags umgibt.

<div class="article" style="display: block;">
    <h3>title</h3>
        <p>
            text content
            <a href="#" style="display: block;float: right;">Read More</a>
        </p>
    <div style="clear: both;"></div>
</div>

Wenn Sie das übergeordnete Element als Position: relativ festlegen, können Sie das untergeordnete Element auf die unterste Einstellungsposition setzen: absolut; und unten: 0;

#outer {
  width:10em;
  height:10em;
  background-color:blue;
  position:relative; 
}

#inner {
  position:absolute;
  bottom:0;
  background-color:white; 
}

<div id="outer">
  <div id="inner">
    <h1>done</h1>
  </div>
</div>
  

Wenn der Text gut verpackt werden soll: -

.outer {
  display: table;
}

.inner {
  height: 200px;
  display: table-cell;
  vertical-align: bottom;
}

/* Just for styling */
.inner {
  background: #eee;
  padding: 0 20px;
}

<!-- Need two parent elements -->
<div class="outer">
  <div class="inner">
    <h3>Sample Heading</h3>
    <p>Sample Paragragh</p>
  </div>
</div>

Ich weiß, dass dieses Zeug alt ist, aber ich bin kürzlich auf dieses Problem gestoßen.

Verwenden Sie absolute Position Divs Ratschläge ist wirklich dumm, weil die ganze Float-Sache irgendwie Punkt mit absoluten Positionen verliert.

Jetzt habe ich keine universelle Lösung gefunden, aber in vielen Fällen verwenden wir schwebende Divs, um etwas in einer Reihe anzuzeigen, wie eine Reihe von Span-Elementen. und das kann man nicht vertikal ausrichten.

Um einen ähnlichen Effekt zu erzielen, können Sie Folgendes tun: Lassen Sie das div nicht schweben, sondern setzen Sie seine Anzeigeeigenschaft auf inline-block. dann können Sie es vertikal ausrichten, wie es Ihnen gefällt. Sie müssen nur Satz Eltern div Eigenschaft vertical-alignentweder top, bottom, middleoderbaseline

Ich hoffe das hilft jemandem

Mit der Einführung von Flexbox ist dies ohne viel Hacking recht einfach geworden. align-self: flex-endauf dem untergeordneten Element wird es entlang der Querachse ausgerichtet .

.container {
  display: flex;
}
.bottom {
  align-self: flex-end;
}

<div class="container">
  <div class="bottom">Bottom of the container</div>
</div>

Ausgabe:

.container {
  display: flex;
  /* Material design shadow */
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  height: 100px;
  width: 175px;
  padding: 10px;
  background: #fff;
  font-family: Roboto;
}
.bottom {
  align-self: flex-end;
}

<div class="container">
  <div class="bottom">Bottom of the container</div>
</div>

Ich hatte diese Lösung auch schon lange gefunden. Das bekomme ich:

Align-Self: Flex-End;

Link: https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ Ich kann mich jedoch nicht erinnern, von wo aus ich diesen Link geöffnet habe. Ich hoffe es hilft

Ich würde nur einen Tisch machen.

<div class="elastic">
  <div class="elastic_col valign-bottom">
    bottom-aligned content.
  </div>
</div>

Und das CSS:

.elastic {
  display: table;
}
.elastic_col {
  display: table-cell;
}
.valign-bottom {
  vertical-align: bottom;
}

Sehen Sie es in Aktion:
http://jsfiddle.net/mLphM/1/

Ich habe mehrere dieser Techniken ausprobiert, und die folgenden haben bei mir funktioniert. Wenn also alles andere hier fehlschlägt, versuchen Sie dies, weil es bei mir funktioniert hat :).

<style>
  #footer {
    height:30px;
    margin: 0;
    clear: both;
    width:100%;
    position: relative;
    bottom:-10;
  }
</style>

<div id="footer" >Sportkin - the registry for sport</div>

A wählte diesen Ansatz von @ dave-kok. Es funktioniert jedoch nur, wenn der gesamte Inhalt ohne Scrollen passt. Ich weiß es zu schätzen, wenn sich jemand verbessern wird

outer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
}
.space {
    float: right;
    height: 75%;  
}
.floateable {
    width: 40%;
    height: 25%;
    float: right;
    clear: right;  
 }

Hier ist der Code http://jsfiddle.net/d9t9joh2/

Dies ist jetzt mit Flexbox möglich. Setzen Sie einfach die 'Anzeige' des übergeordneten div auf 'flex' und setzen Sie die Eigenschaft 'margin-top' auf 'auto'. Dies verzerrt keine Eigenschaft der beiden Div.

.parent {
  display: flex;
  height: 100px;
  border: solid 1px #0f0f0f;
}
.child {
  margin-top: auto;
  border: solid 1px #000;
  width: 40px;
  word-break: break-all;
}

<div class=" parent">
  <div class="child">I am at the bottom!</div>
</div>

Ich bin mir nicht sicher, aber ein zuvor veröffentlichtes Szenario schien zu funktionieren, wenn Sie position verwenden: relativ statt absolut für das untergeordnete div.

#parent {
  width: 780px;
  height: 250px;
  background: yellow;
  border: solid 2px red;
}
#child {
  position: relative;
  height: 50px;
  width: 780px;
  top: 100%;
  margin-top: -50px;
  background: blue;
  border: solid 2px green;
}

<div id="parent">
    This has some text in it.

    <div id="child">
        This is just some text to show at the bottom of the page
    </div>
</div>

Und keine Tische ...!

Wenn Sie eine relative Ausrichtung benötigen und DIVs Ihnen immer noch nicht das bieten, was Sie möchten, verwenden Sie einfach Tabellen und setzen Sie valign = "bottom" in der Zelle, in der der Inhalt nach unten ausgerichtet werden soll. Ich weiß, dass es keine gute Antwort auf Ihre Frage ist, da DIVs Tabellen ersetzen sollen, aber das hatte ich kürzlich mit einer Bildunterschrift zu tun und es hat bisher einwandfrei funktioniert.

Ich habe dieses zuvor veröffentlichte Szenario auch ausprobiert.

div {
  position: absolute; 
  height: 100px; 
  top: 100%; 
  margin-top:-100px; 
}

Die absolute Positionierung fixiert das Div beim Laden der Seite im untersten Teil des Browsers. Wenn Sie jedoch nach unten scrollen, wenn die Seite länger ist, wird nicht mit Ihnen gescrollt. Ich habe die Positionierung relativ geändert und sie funktioniert perfekt. Das Div geht beim Laden direkt nach unten, sodass Sie es erst sehen, wenn Sie unten sind.

div {
      position: relative;
      height:100px; /* Or the height of your image */
      top: 100%;
      margin-top: -100px;
}

Ein interessanter Ansatz besteht darin, ein paar rechte Float-Elemente übereinander zu stapeln.

<div>
<div style="float:right;height:200px;"></div>
<div style="float:right;clear:right;">Floated content</div>
<p>Other content</p>
</div>

Das einzige Problem ist, dass dies nur funktioniert, wenn Sie die Höhe der Box kennen.

Stu's Antwort kommt der bisherigen Arbeit am nächsten, berücksichtigt jedoch immer noch nicht die Tatsache, dass sich die Höhe Ihres äußeren Divs ändern kann, je nachdem, wie der Text darin eingeschlossen ist. Es reicht also nicht aus, das innere Div (durch Ändern der Höhe des "Rohrs") nur einmal neu zu positionieren. Diese Änderung muss innerhalb einer Schleife erfolgen, damit Sie kontinuierlich überprüfen können, ob Sie die richtige Positionierung erreicht haben, und diese bei Bedarf neu einstellen können.

Das CSS aus der vorherigen Antwort ist immer noch vollkommen gültig:

#outer {
    position: relative; 
}

#inner {
    float:right;
    position:absolute;
    bottom:0;
    right:0;
    clear:right
}

.pipe {
    width:0px; 
    float:right

}

Das Javascript sollte jedoch eher so aussehen:

var innerBottom;
var totalHeight;
var hadToReduce = false;
var i = 0;
jQuery("#inner").css("position","static");
while(true) {

    // Prevent endless loop
    i++;
    if (i > 5000) { break; }

    totalHeight = jQuery('#outer').outerHeight();
    innerBottom = jQuery("#inner").position().top + jQuery("#inner").outerHeight();
    if (innerBottom < totalHeight) {
        if (hadToReduce !== true) { 
            jQuery(".pipe").css('height', '' + (jQuery(".pipe").height() + 1) + 'px');
        } else { break; }
    } else if (innerBottom > totalHeight) {
        jQuery(".pipe").css('height', '' + (jQuery(".pipe").height() - 1) + 'px');
        hadToReduce = true;
    } else { break; }
}

Ich weiß, dass es ein sehr alter Thread ist, aber ich würde trotzdem gerne antworten. Wenn jemand den folgenden CSS & HTML folgt, dann funktioniert es. Die Kinderfußzeile haftet wie Klebstoff am Boden.

<style>
        #MainDiv
        {
            height: 300px;
            width: 300px;
            background-color: Red;
            position: relative;
        }

        #footerDiv
        {
            height: 50px;
            width: 300px;
            background-color: green;
            float: right;
            position: absolute;
            bottom: 0px;
        }
    </style>


<div id="MainDiv">
     <div id="footerDiv">
     </div>
</div>

Verwenden der CSS- margin-topEigenschaft mit dem Ziel, die Fußzeile an den unteren Rand des Containers zu setzen. Und um die CSS- text-align-lastEigenschaft zu verwenden, setzen Sie den Inhalt der Fußzeile in die Mitte.

 <div class="container" style="margin-top: 700px;  text-align-last: center; ">
      <p>My footer Here</p>  
 </div>

Oh, Jugendliche ... Hier sind Sie:

<div class="block">
    <a href="#">Some Content with a very long description. Could be a Loren Ipsum or something like that.</a>
    <span>
        <span class="r-b">A right-bottom-block with some information</span>
    </span>
    <span class="clearfix"></span>
</div>
<style>
    .block {
        border: #000 solid 1px;
    }

    .r-b {
        border: #f00 solid 1px;
        background-color: fuchsia;
        float: right;
        width: 33%
    }

    .clearfix::after {
        display: block;
        clear: both;
        content: "";
    }
</style>

Keine absolute Position! Reaktionsschnell! Alte Schule

Ziemlich alte Frage, aber immer noch ... Sie können ein Div wie folgt an den unteren Rand der Seite schweben lassen:

div{
  position: absolute; 
  height: 100px; 
  top: 100%; 
  margin-top:-100px; 
}

Sie können sehen, wo die Magie passiert. Ich denke, Sie könnten das Gleiche tun, um es auf den Grund eines übergeordneten Div zu bringen.

einfach ...... in der HTML-Datei rechts .... haben Sie die "Fußzeile" (oder das Div, das Sie unten wollen) unten. Also mach das nicht:

<div id="container">
    <div id="Header"></div>
    <div id="Footer"></div>
    <div id="Content"></div>
    <div id="Sidebar"></div>
</div>

TUN SIE DAS: (haben Sie die Fußzeile darunter.)

<div id="container">
    <div id="Header"></div>
    <div id="Content"></div>
    <div id="Sidebar"></div>
    <div id="Footer"></div>
</div>

Danach können Sie die CSS-Datei aufrufen und die "Seitenleiste" nach links schweben lassen. Lassen Sie dann "Inhalt" nach rechts schweben, und lassen Sie "Fußzeile" beide löschen.

das sollte funktionieren. tat für mich.

Ich habe dies beim ersten Versuch position:absolute; bottom:0;zum Laufen gebracht , indem ich der Div-ID im CSS hinzugefügt habe . Ich habe den übergeordneten Stil nicht hinzugefügt position:relative;.

Es funktioniert perfekt in Firefox und IE 8, habe es noch nicht in IE 7 ausprobiert.

Eine alternative Antwort ist die umsichtige Verwendung von Tabellen und Zeilenbereichen. Wenn Sie alle Tabellenzellen in der vorhergehenden Zeile (mit Ausnahme der Hauptinhaltszelle) auf rowspan = "2" setzen, erhalten Sie immer ein Loch mit einer Zelle am unteren Rand Ihrer Haupttabellenzelle, das Sie immer mit valign = "bottom" setzen können.

Sie können auch die Höhe so einstellen, dass sie das Minimum für eine Linie ist. So erhalten Sie immer Ihre bevorzugte Textzeile am unteren Rand, unabhängig davon, wie viel Platz der Rest des Textes einnimmt.

Ich habe alle Div-Antworten ausprobiert und konnte sie nicht dazu bringen, das zu tun, was ich brauchte.

<table>
<tr>
   <td valign="top">
     this is just some random text
     <br> that should be a couple of lines long and
     <br> is at the top of where we need the bottom tag line
   </td>
   <td rowspan="2">
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     is really<br/>
     tall
  </td>
</tr>
<tr>
  <td valign="bottom">
      now this is the tagline we need on the bottom
  </td>
</tr>
</table>

Hier ist meine Lösung:

<style>
.sidebar-left{float:left;width:200px}
.content-right{float:right;width:700px}

.footer{clear:both;position:relative;height:1px;width:900px}
.bottom-element{position:absolute;top:-200px;left:0;height:200px;}

</style>

<div class="sidebar-left"> <p>content...</p></div>
<div class="content-right"> <p>content content content content...</p></div>

<div class="footer">
    <div class="bottom-element">bottom-element-in-sidebar</div>
</div>

Sie können versuchen, ein leeres Element mit einer Breite von 1 Pixel zu verwenden und es zu schweben. Löschen Sie dann das Element, das Sie tatsächlich positionieren möchten, und verwenden Sie die Höhe des leeren Elements, um zu steuern, wie weit es nach unten geht.

http://codepen.io/cssgrid/pen/KNYrey/

.invisible {
float: left;  
}

.bottom {
float: left;
padding-right: 35px;
padding-top: 30px;
clear: left;
}