CSS: fit relative positioniert Eltern mit der Höhe des absolut positionierten Kind

Ich versuche zum erstellen einer einfachen Diashow. So weit, die grundlegende markup sieht wie folgt aus:

<h1>My Slideshow</h1>

<p>This paragraph behaves as expected.</p>

<div class="slide-container">
  <div class="slide">
    <h2>First Slide</h2>
    <p>Some stuff on this slide…</p>
  </div>

  <div class="slide">
    <h2>Second Slide</h2>
    <p>And some more stuff here…</p>
  </div>
</div>

<p>This paragraph will disappear beneath the stacked images.</p>

Dies ist das entsprechende CSS:

.slide-container {
  position: relative;
}

.slide {
  position: absolute;
  top: 0;

  /* just for the looks */
  width: 20em;
  padding: 0 1em;
  border: 1px solid steelblue;
  background: white;
}

Das problem ist, dass die .slide-container passt nicht zu der Höhe seines Kindes (oder Kinder) .slide (siehe screenshot).

CSS: fit relative positioniert Eltern mit der Höhe des absolut positionierten Kind

Ich weiß, ich kann die Höhe des .slide-container manuell, aber ich möchte dies in einem fluid grid, wo die Höhe ist variabel. Gibt es eine Möglichkeit, dies zu erreichen?

  • Leider absolut positionierte Elemente sind genau das: absolut Positioniert, wo Sie gesagt der browser zu setzen. Diese Art der Positionierung entfernt das element aus dem Dokument fließen.
  • also ich denke, die Einstellung der Höhe manuell wäre die einzige Lösung, bin ich im Recht?
  • oder gibt es einen anderen Weg, um Stapel der .slides übereinander, ohne Verwendung von position: absolute; ?
InformationsquelleAutor Patrick Oscity | 2011-12-20
  1. 13

    Absolut positionierte Elemente sind logisch-verbunden mit Ihren Eltern, aber nicht "körperlich". Sie sind nicht Teil des Layouts, also das übergeordnete Element kann nicht wirklich sehen, wie groß Sie sind. Sie müssen code die Größe selbst, oder schnüffeln, es mit JavaScript, und legen Sie es auf run-time.

    InformationsquelleAutor Diodeus - James MacFarlane
  2. 1

    Können Sie dies unter Verwendung von jquery:

        function sliderheight(){
        divHeight = $('.slide').height();
        $('.slide-container').css({'height' : divHeight});
    }
    sliderheight();

    Dadurch werden die Größe der "slide-container" div auf die gleiche Höhe wie die 'Folie' div.

    Können Sie machen es zu reagieren, indem die Funktion auf das auslösen von ein 'resize' - event:

       $(window).resize(sliderheight);

    Hoffe, das hilft.

    InformationsquelleAutor Charlie Tupman
  3. 0

    Perfekte Weg, dies zu tun ist, um die relative übergeordnete Dimensionen, d.h. Höhe & Breite passen die absolute Kindern.

    http://learn.shayhowe.com/advanced-html-css/detailed-css-positioning/

    Dieser Kerl schrieb genug zu verstehen, die Grundlagen von css-Positionierung. Eigentlich ist das Elternelement verwendet, um alle seine absolute Kind-logisch. Aber er teilt nicht die physische position als ein Ergebnis dehnt sich nicht selbst zu decken, die relative Kindern.

    InformationsquelleAutor SouravOrii
Schreibe einen Kommentar