it-swarm.com.de

Wie bringe ich eine Div dazu, auf den Boden ihres Containers zu schweben?

Ich habe mit float: right (oder left) viele Male Bilder und eingefügte Boxen oben in einen Container verschoben. Vor kurzem musste ich ein Div in der unteren rechten Ecke eines anderen Div mit dem normalen Textumbruch, den Sie mit float erhalten, schweben lassen (Text über und nur nach links).

Ich dachte, dass dies relativ einfach sein muss, obwohl float keinen Grundwert hat, aber ich habe es nicht mit einer Reihe von Techniken geschafft und beim Durchsuchen des Webs nichts anderes als die absolute Positionierung gefunden, aber das tut es nicht Geben Sie das richtige Zeilenumbruchverhalten an.

Ich hatte gedacht, dies wäre ein sehr verbreitetes Design, aber anscheinend ist es nicht. 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 ein Hinweis für alle, die hierher kommen. Die oben als Duplikat verknüpfte Frage ist in der Tat kein Duplikat. Die Anforderung, dass das eingefügte Element mit Text umbrochen werden muss, macht es völlig anders. Tatsächlich macht die Antwort auf die oben gewählte Antwort deutlich, warum die Antwort in der verknüpften Frage als Antwort auf diese Frage falsch ist. Auf jeden Fall scheint es immer noch keine generelle Lösung für dieses Problem zu geben, aber einige der hier und in der verknüpften Frage aufgeführten Lösungen funktionieren möglicherweise in bestimmten Fällen.

265
Stephen Martin

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

Für diejenigen, die es vielleicht nicht verstanden haben, ist dies das, wonach ich suche: Beim Veröffentlichen ist es durchaus üblich, einen Einschub (Bild, Tabelle, Abbildung usw.) so zu gestalten, dass sein unterer Rand mit dem untersten 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 Einschub sich befindet. In html/css ist es trivial, den Float-Stil zu verwenden, um die Oberkante eines Insets mit der Oberkante eines Blocks auszurichten, aber zu meiner Überraschung scheint es unmöglich, die Unterkante von Text und Inset auszurichten, obwohl dies eine übliche Layoutaufgabe ist .

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

46
Stephen Martin

Setze das übergeordnete div auf position: relative, dann die innere div zu ...

position: absolute; 
bottom: 0;

... und los gehts :)

288
Timothy Khouri

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

  • Schweben Sie Ihre Elemente wie gewohnt nach links
  • Drehen Sie das übergeordnete Div um 180 Grad mit

    -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 nach links schwebenden Elemente (geben Sie ihnen eine Klasse) um 180 Grad, um sie wieder gerade auszurichten. Voila! sie schweben auf den Boden.

72
Tom Groentjes

Ich habe dies in JQuery erreicht, indem ich ein Strebenelement mit der Breite Null über dem Schwimmer rechts platziert und dann die Strebe (oder das Rohr) entsprechend der übergeordneten Höhe abzüglich der Höhe des schwimmenden Kindes dimensioniert habe.

Bevor js loslegt, benutze ich den Positions-Absolut-Ansatz, der funktioniert, aber den Textfluss zulässt. Deshalb schalte ich auf Position statisch um, um die Federbeinannäherung zu ermöglichen. (Header ist das übergeordnete Element, Ausschnitt ist der, den ich unten rechts haben möchte, und Rohr 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.

15
Stu

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

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

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

9
Yona

Wenn Sie damit einverstanden sind, dass nur die unterste Zeile des Texts 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 verschieben. Wenn Sie einen bestimmten Inhalt in ein Absatz-Tag innerhalb eines Blocks einfügen und einen Link in die untere rechte Ecke des Blocks verschieben möchten, platzieren Sie den Link innerhalb des Absatz-Blocks und setzen Sie ihn auf float: right. Fügen Sie dann ein div-Tag mit clear ein : Beide werden direkt unter das Ende des Absatz-Tags gesetzt. Der letzte Div ist, um sicherzustellen, dass das übergeordnete Tag die Floating-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>
4
CC.

Wenn Sie möchten, dass der Text schön umbrochen wird: -

.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>
3
Salman for Hire

Ich weiß, dass dieses Zeug alt ist, aber ich bin vor kurzem auf dieses Problem gestoßen.

benutze absolute position divs ratschläge sind wirklich albern, weil das ganze float ding bei absoluten positionen irgendwie punkt verliert ..

jetzt habe ich keine universelle lösung gefunden, aber in vielen fällen benutze ich float 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 dies tun: Lassen Sie das div nicht schweben, sondern setzen Sie seine Anzeigeeigenschaft auf inline-block. dann kannst du es vertikal ausrichten, wie es dir gefällt. Sie müssen nur die div-Eigenschaft der Eltern festlegen vertical-align entweder top, bottom, middle oder baseline

ich hoffe, das hilft jemandem

3
countersweet

Mit der Einführung von Flexbox ist dies ohne viel Hacken ganz einfach geworden. align-self: flex-end für das untergeordnete Element richtet es entlang der Querachse aus.

.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>
2
Manoj Kumar

Wenn Sie das übergeordnete Element als position: relative festlegen, können Sie das untergeordnete Element auf die unterste Einstellungsposition festlegen: absolute; 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>
  
2
Filipe Pitacho

Dies ist jetzt mit der Flexbox möglich. Setzen Sie einfach die 'Anzeige' des übergeordneten div auf 'flex' und die Eigenschaft 'margin-top' auf 'auto'. Dies verzerrt nicht das Eigentum beider 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>
1
Tushar Bohra

Ich bin mir nicht sicher, aber ein Szenario, das zuvor gepostet wurde, schien zu funktionieren, wenn Sie position: relative anstelle von absolute für das untergeordnete div verwenden.

#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 ...!

1
RedGen

Ich würde einfach 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/

1

Auch diese Lösung hatte ich 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 ich diesen Link geöffnet habe. Ich hoffe es hilft

1
Ben

A hat diesen Ansatz von @ dave-kok gewählt. Aber es funktioniert nur, wenn der gesamte Inhalt ohne Scrollen passt. Ich schätze, 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 Code http://jsfiddle.net/d9t9joh2/

1
chilicoder

Ich habe einige dieser Techniken ausprobiert, und die folgenden haben bei mir funktioniert. Wenn also alles andere hier fehlschlägt, probieren 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>
1
Kin Sport

Ich weiß, dass es ein sehr alter Thread ist, aber ich würde trotzdem gerne antworten. Wenn jemand die unten stehende CSS & HTML befolgt, dann funktioniert es. Die Kinderfußzeile bleibt wie ein Klebstoff an der Unterseite haften.

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

Sie können versuchen, ein leeres Element mit einer Breite von 1 Pixel zu verwenden und es zu verschieben. Deaktivieren Sie dann das Element, das Sie tatsächlich positionieren möchten, und bestimmen Sie anhand der Höhe des leeren Elements, wie weit es nach unten reicht.

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

.invisible {
float: left;  
}

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

Ich habe dieses Szenario auch schon früher 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, aber wenn Sie nach unten scrollen, wenn die Seite länger ist, scrollt es nicht mit Ihnen. Ich habe die Position relativ geändert und es funktioniert perfekt. Das Div wird beim Laden direkt nach unten verschoben, sodass Sie es erst sehen, wenn Sie nach unten gelangen.

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

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.

0
Dave Kok

So verwenden Sie CSS margin-top Eigenschaft, mit der die Fußzeile auf den Boden des Containers gesetzt werden soll. Und CSS verwenden text-align-last -Eigenschaft, um den Inhalt der Fußzeile in die Mitte zu stellen.

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

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 am unteren Rand 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.

0
BBAmp

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

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 Elternteils zu verschieben.

0
Miha Eržen

Stus Antwort kommt der bisherigen Arbeit am nächsten, berücksichtigt jedoch nicht die Tatsache, dass sich die Höhe Ihres äußeren Divs abhängig von der Art und Weise, wie der Text in ihn eingebunden wird, ändern kann. Daher reicht es nicht aus, das innere Teil (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 bereits erreicht haben, und bei Bedarf nachjustieren können.

Das CSS aus der vorherigen Antwort ist immer noch 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 ungefähr 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; }
}
0
sherlock42