当我把文字放进去时，DIV就会移动 [英] DIV moves when I put text in it

问题描述

我花了一段时间在本网站上创建了一系列无法​​使用div的图谱我很好地对齐了它。

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

在检查元素时，似乎没有添加任何边距或填充或我可以看到的任何其他内容，并且它似乎不会影响孙子div图层。

JSFiddle

HTML：

 < div id =pedigree> 
< div id =parentwrap> 
< div class =parent> test< / div> 
< / div> 
< div id =childwrap> 
< div class =child> 
< p> Am。 CH。 Kenai的Aldebaran< / p> 
< / div> 
< div class =child> 
< p> pAm。 CH。 Santa Clara Del Viento< / p> 
< / div> 
< / div> 
< div id =grandchildwrap> 
< div class =grandchild> Am。能够。 CH。 Ryan的Eclipse在Kenai< / div> 
< div class =grandchild> Am。 CH。 Timber Ridge的Kenai Abi< / div> 
< div class =grandchild> Am。 CH。 Sky Run Gavril Virtual Zip JC< / div> 
< div class =grandchild> Am。能够。 CH。 Tazeb的Zena< / div> 
< / div> 
< / div> 
  

CSS：

  #pedigree {
 position：relative; 
 width：584px; 
 height：204px; 
 margin：0 auto; 
 margin-top：15px; 
 padding-bottom：15px; 
 border-bottom：1px虚线黑色; 
} 
 #parentwrap {
 position：relative; 
 display：inline-block; 
保证金：0; 
 width：auto; 
 height：205px; 
} 
 .parent {
 position：relative; 
 width：190px; 
 height：202px; 
 margin：0px; 
 padding：0px; 
 border：1px纯黑色; 
} 
 #childwrap {
 position：relative; 
 display：inline-block; 
保证金：0; 
 width：auto; 
 height：205px; 
} 
 .child {
 position：relative; 
 width：190px; 
 height：95px; 
 margin：0px; 
 padding：0px; 
 border：1px纯黑色; 
 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纯黑色; 
 margin-bottom：4px; 
} 
 .parent，.child，.grandchild {
 -moz-border-radius：35px; 
 border-radius：35px; 
  

解决方案

添加文本为#parentwrap div创建基线，所以div与之对齐。如果没有文本，就没有基线，因此div需要一个后备布局模式。

要修复，请设置add #parentwrap {vertical-align：top ; }

I spent some time creating a pedigree out of div layers on this site and I got it all nicely aligned.

But when I put text in it, whether just in the div or in p tags, it moves the div layer down significantly.

It doesn't seem to add any margin or padding or anything else I can see while inspecting the element, and it doesn't seem to be affecting the grandchild div layers.

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;

解决方案

Adding the text creates a baseline for the #parentwrap div, so the div gets aligned to that. Without the text, there's no baseline so the div takes a fallback layout mode.

To fix, set add #parentwrap { vertical-align:top; }

这篇关于当我把文字放进去时，DIV就会移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！