Wie kann das übergeordnete div Größe automatisch anpassen, seine Höhe basiert auf der Größe des Kindes?

Wie kann das übergeordnete div-auto-resize-es ist die Höhe, basierend auf der Größe des Kindes?

CSS:

div#main{
    width: 970px;
    height: 100px;
    background: rgba(255,0,0,1);
    border: 5px solid rgb(251,151,117);
    margin: 20px 0px 20px 0px; /* Top Right Bottom Left*/
    padding: 10px       
}
div#left{width: 383px;
    height: 100%; 
    margin-right: 5px;
    background: rgb(0,0,255);
    float:left
}
div#description{width: 100%; 
    height: 50%; 
    background: rgb(0,0,0)  
}
div#following{width: 100%; 
    height: 50%; 
    background: rgb(0,255,0)  
}
div#posts{width: 577px;
    height: auto;
    margin-left: 5px;
    background: rgb(255,255,0);
    float: right
}

HTML:

<div id="main">
    <div id="left" class="cell">

        <div id="description" class="cell">
        </div>

        <div id="following" class="cell">
        </div>

    </div>

    <div id="posts" class="cell"> 
      there are some contents here (height is set to auto)
    </div> 
</div>

  • Nur einen Blick auf diese Scrollbalken auf der code-Block nach der Bearbeitung macht mich krank im inneren.
  • Was ist Ihr problem? Sie veröffentlicht eine Tonne von code mit einem Titel. Beschreibungen sind gold, Mann!
  • Hier, lassen Sie mich zu reduzieren.
  • Jetzt reduzieren Sie es zu viel ist, würden wir gerne sehen, die relevanten HTML-und CSS-Dateien.
  • Nicht die Höhe festlegen, die auf das Eltern-element? ;P
  • Warten. Ich werde es versuchen.
  • Oh! Es hat nicht funktioniert xD
  • Wahr. Was ist hier die Frage?
  • Wie kann die Höhe des child-element (die auf auto gesetzt ist) Einfluss auf die Höhe des parent-Elements? Oder wie Erben? LOL
  • schauen Sie, diese für ein tieferes Verständnis: stackoverflow.com/questions/211383/...

InformationsquelleAutor | 2011-03-28
  1. 7

    Machte ich einen sehr einfach Beispiel für Sie, um zu sehen, wie die variable parent Höhe arbeitet.

    CSS:

    .parent
{
    height: auto;
    border: 1px dashed #f00;
    padding: 5px;
}

.child
{
    height: 100px;
    border: 1px dashed #0f0;
}

    HTML:

    <div class="parent">
    <div class="child">
    </div>
</div>

    Folgen, was da ist, und du wirst das gut machen.

    Nachdem wir uns durch Eure code es ist ein float-problem, müssen Sie fügen Sie ein neues div an der Unterseite mit clear: both; klar, das schwimmt und machen die #main div erscheinen gefüllt.

    Schauen Sie zum Beispiel hier.

    • Ich weiß, dass. Was mich stört ist, dass es , zum Beispiel, basiert auf meine Frage, ein weiteres DIV-Element wie dieses : <div><div><div></div><div></div> ausser, dass der Letzte div ist nicht ein div (die unregelmäßigen Höhen also ich habe den 2. div, enthält die unregelmäßigen-in-Höhe Inhalt, auto)
    • Wie, was? Du bist viel zu vage.
    • Ich warte....
    • Aktualisiert, funktioniert jetzt.
    • Beide links sind kaputt. Würden Sie den Geist der Wiederherstellung der Beispiele und Einbettung in die post?
    • fixed, danke für den Hinweis it out 🙂

    InformationsquelleAutor Kyle
  2. 1
    div#main{
         width: 970px;

         background: rgba(255,0,0,1);
         border: 5px solid rgb(251,151,117);
         margin: 20px 0px 20px 0px; /* Top Right Bottom Left*/
         padding: 10px       
    }

    Entfernen height-Attribut

    • Ich habe versucht, das schon, aber es hat nicht funktioniert. xD
    InformationsquelleAutor Vicky
  3. 0

    CSS3

    .container {
    display: inline;
    position: relative;
}

    Problem beheben sollte. Verwenden inline-block wenn Sie wollen, dass es eine block-und inline.

    InformationsquelleAutor Elias
Schreibe einen Kommentar