Elternelement DIV Erben die Breite der absoluten Kindes DIV

Ich versuche die position eines untergeordneten DIV-Element am unteren Rand des übergeordneten DIV, aber ich möchte auch den Inhalt des DIV Kind zu helfen, diktieren Sie die Abmessungen des übergeordneten DIV. So habe ich es jetzt, das Kind-DIV hat keinen Einfluss auf die Höhe/Breite des übergeordneten DIV.

Hier ist eine Probe meiner HTML/CSS-code:

//HTML-code:

<div id="parent">
    <h3>Top Aligned Title</h3>
    <div id="child"></div>
</div>

//CSS-code:

#parent {
    background-color:#222;
    position: relative;
    height: 500px;
}
#child {
    background-color:#444;
    position: absolute;
    bottom: 0px;
    width: 100px;
    height: 200px;
}

Was muss ich tun, es zu erreichen, was ich versuche zu tun? Ich könnte verzichten auf die absolute/relative CSS-Regeln und einfach eine Tabelle erstellen, die innerhalb des übergeordneten DIV, die mir erlauben würde, zu erreichen sowohl eine untere Ausrichtung und Inhalte diktiert die übergeordneten Dimensionen.

Allerdings würde ich gerne wissen ob es eine Möglichkeit in CSS und ohne die Breite des übergeordneten DIV.

vielen Dank im Voraus!

Meinst du Sie wollen #Eltern zu nehmen, ist es die Breite von #Kind, so werden 100px breit? Id so dann machen Sie Ihren #Eltern-div "display: inline-block" und sehen, ob das ist, was Sie nach.
Ja. Obwohl die Breite des untergeordneten DIV-Element, in diesem Beispiel ist angegeben in der CSS, die Breite in meinem eigentlichen Projekt vorgegeben dynamisch in der JS-code.
Diese Art der Sache? jsfiddle.net/Avww9
Die Titel in Ihrem Beispiel ist zu diktieren, die Breite des übergeordneten DIV. Wenn die die Titel waren nicht so breit wie das Kind-DIV, dann wird der parent-DIV wäre noch die Breite der Titel und nicht das Kind DIV.
Fair genug - ziemlich sicher, dass das, was Sie wollen, kann nicht mit css allein.

InformationsquelleAutor jaxim | 2013-02-12

  1. 7

    Die kurze Antwort ist, dass das, was Sie fordern im Grunde nicht getan werden kann mit reinem CSS /HTML. (zumindest ohne Tabellen), die Sie brauchen Javascript, Lesen würde #Kind Breite/Höhe und führen Sie dann die Berechnung, die Sie wollen, zu tun (weiß ich nicht) und legen Sie eine neue Höhe/Breite #parent.

    Ansonsten, wenn du meinst, dass Sie wollen, dass #Kindes Höhe/Breite zu ändern, nach dessen Inhalt, natürlich ist das native CSS einfach die Höhe/Breite auf auto und starten Sie dann das hinzufügen von text in es du wirst sehen, es wird wachsen beginnen, um zu passen Ihre Inhalte im inneren.

    Als #Kind absolut positioniert ist, dann ist es AUS dem normalen Fluss des Dokuments, deshalb wird es keinen Einfluss auf den #Eltern.

    Das war es, was ich fürchtete. Ich denke, ich kann die Einstellung der Breite des übergeordneten DIV dynamisch, wenn ich weiß, der Inhalt des untergeordneten DIV. Alternativ denke ich, kann ich die Verwendung des table-Tags die groß-standby, Dinge zu erledigen schnell in HTML.
    Nun, wenn Sie wirklich an es denken, Ihr design hat einige "Logik" dahinter, daher -zumindest für jetzt- , JS (jQuery) ist der Weg zu gehen..

    InformationsquelleAutor George Katsanos

  2. 3

    Mit modernen CSS, das ist machbar.

    HTML:

    <div id="parent">
    <h3>Top Aligned Title</h3>
    <div id="child">
        <p>CHILD ELEMENT</p>
    </div>
</div>

    CSS:

    #parent {
    background:red;
    height: 500px;
    position:relative;
}
#child {
    background:green;
    position: absolute;
    top:100%;
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
    width: 100px;
}

    http://jsfiddle.net/Bushwazi/bpe5s6x3/

    1. transform:translateY(-100%); ist der trick. Es ist die Mathematik auf der Grundlage der element's box-model.
    2. Sie könnte auch kombinieren top:50%; mit transform:translateY(-50%); zu zentrieren.
    3. Können Sie tauschen top für left und translateY für translateX position das element horizontal.

    InformationsquelleAutor Jason Lydon

  3. 1

    Hier gehen Sie

    HTML:

    <main id="parent">
  <div class="popup">Top Aligned Title
    <div class="content">
      Content
    </div>
  </div>
</main>

    CSS:

    #parent {
  width: 120px;
}

.popup {
  position: relative;
  margin-top: 48px;
}

.content {
  left: 0;
  position: absolute;
  background: green;
  width: 100%;
}

    http://jsfiddle.net/8L9votay/

    InformationsquelleAutor Marcel Tinner

Schreibe einen Kommentar