Question

我花了一些时间在this site上用div层创建一个谱系，我把它完全对齐了。

但是当我在其中放入文本时，无论是在div还是在p标签中，它都会显着降低div层。

在检查元素时，它似乎没有添加任何边距或填充或其他任何东西，它似乎不会影响孙子div层。

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;

Answer 1

添加文本会为#parentwrap div创建一个基线，因此div会与之对齐。如果没有文本，则没有基线，因此div采用后备布局模式。

要修复，请设置添加#parentwrap { vertical-align:top; }

当我将文本放入其中时，DIV会移动

1 个答案: