DIV bewegt sich, wenn ich einen text in es

Verbrachte ich einige Zeit mit der Erstellung einer Ahnentafel aus div-Layern auf diese Website und ich hab alles schön ausgerichtet.

Aber wenn ich text in es, ob nur in der div-oder p-tags, verschiebt es die div-layer deutlich nach.

Scheint es nicht zu add irgendein margin oder padding oder etwas anderes, das ich sehen kann während der Untersuchung das element, und es scheint nicht zu sein, die das Enkelkind div-Ebenen.

JSFiddle

HTML:

<div id="pedigree">
    <div id="parentwrap">
        <div class="parent">test</div>
    </div>
    <div id="childwrap">
        <div class="child">
            <p>Am. Ch. Kenai's Aldebaran</p>
        </div>
        <div class="child">
            <p>pAm. Ch. Santa Clara Del Viento</p>
        </div>
    </div>
    <div id="grandchildwrap">
        <div class="grandchild">Am. Can. Ch. Ryzann's Eclipse at Kenai</div>
        <div class="grandchild">Am. Ch. Timber Ridge's Abi of Kenai</div>
        <div class="grandchild">Am. Ch. Sky Run Gavril Virtual Zip JC</div>
        <div class="grandchild">Am. Can. Ch. Tazeb's Zena</div>
    </div>
</div>

CSS:

#pedigree {
    position: relative;
    width: 584px;
    height: 204px;
    margin: 0 auto;
    margin-top: 15px;
    padding-bottom: 15px;
    border-bottom: 1px dotted black;
}
#parentwrap {
    position: relative;
    display: inline-block;
    margin: 0;
    width:auto;
    height: 205px;
}
.parent {
    position: relative;
    width: 190px;
    height: 202px;
    margin: 0px;
    padding: 0px;
    border: 1px solid black;
}
#childwrap {
    position: relative;
    display: inline-block;
    margin: 0;
    width: auto;
    height: 205px;
}
.child {
    position: relative;
    width: 190px;
    height: 95px;
    margin: 0px;
    padding: 0px;
    border: 1px solid black;
    margin-bottom: 10px;
}
#grandchildwrap {
    position: relative;
    display: inline-block;
    width: auto;
    height: 205px;
}
.grandchild {
    position: relative;
    width: 190px;
    height: 46px;
    margin: 0px;
    padding: 0px;
    border: 1px solid black;
    margin-bottom: 4px;
}
.parent, .child, .grandchild {
    -moz-border-radius: 35px;
    border-radius: 35px;
Siehe Etwas auf meiner Website nicht funktioniert. Kann ich nur fügen Sie einen link zu?
Nicht verwandt, aber die Kopie auf Ihrer Website ist gespickt mit Rechtschreib - /Grammatik-Fehler. Denken Sie daran, dies zu beheben, auch!
Punkt getroffen wird, fügen Sie code
Wird es etwas ändern, wenn Sie entfernen height div #pedigree?
Isolieren Sie diese unten zwei die kleinste mögliche Gruppe von markup/css usw. Oft wird Sie erleuchten, und Sie lernen, mit einem Schwerpunkt mehr setzen. Als ein beiseite, aus meiner begrenzten Erfahrung ist es wahrscheinlich, etwas in etwas anderes, das größer ist als der container.

InformationsquelleAutor user1595170 | 2013-02-13

  1. 30

    Hinzufügen der text schafft eine Basis für die #parentwrap div, also das div wird ausgerichtet. Ohne text, es gibt keine Grundlinie, so dass das div braucht eine fallback-layout-Modus.

    Zu beheben, legen Sie hinzufügen #parentwrap { vertical-align:top; }

    ich habe Frage mich, ob es vielleicht ein alignment-problem, aber ich didnt verstehen, warum es wäre ( daher Fragen, statt zu raten, besser zu verstehen, warum) nicht, dass ich bin sicher, warum es erstellt eine Grundlinie gibt es standardmäßig, scheint ziemlich nutzlos, aber das wurde ja behoben, also mein problem ist ich danke Ihnen sehr viel, in der Tat. Es ist wirklich toll, solch eine wunderbare Gemeinschaft von Menschen.
    können Sie das erklären oder mir ein link geben, der erklärt, "baseline"."
    Das tut es tatsächlich. Die genauen Regeln für die Ausrichtung der Grundlinie, was die Voreinstellung ist hier: w3.org/TR/CSS21/visudet.html#propdef-vertical-align. Beachten Sie insbesondere, heißt es "baseline: richtet die Grundlinie der box an der Grundlinie der übergeordneten box. Wenn die box keine Grundlinie, richten Sie den unteren Rand, Rand mit den Eltern Grundlinie."
    Danke. Ich denke, es hilft uns, die Entwickler, angehende Designer 😉

    InformationsquelleAutor Alohci

Schreibe einen Kommentar