我有一个div,其中包含图片和说明。 当我更改.describing margin-top时,容器div移动:

在此处输入图片说明在此处输入图片说明在此处输入图片说明

HTML:

<div class="project">
    <a href="img/projects/a/a6.png" data-lightbox="a" data-title="A* algorithm realization">
        <img class="projim" src="img/projects/a/acover.png" onmouseover="this.src='img/projects/a/a6.png'"  onmouseout="this.src='img/projects/a/acover.png'"/>
    </a>
    <a class="hidden" href="img/projects/a/a1.png" data-lightbox="a" data-title="A* algorithm realization">
    </a>
    <a class="hidden" href="img/projects/a/a2.png" data-lightbox="a" data-title="A* algorithm realization">
    </a>            
    <a class="hidden" href="img/projects/a/a3.png" data-lightbox="a" data-title="A* algorithm realization">
    </a>
    <a class="hidden" href="img/projects/a/a4.png" data-lightbox="a" data-title="A* algorithm realization">
    </a>
    <a class="hidden" href="img/projects/a/a5.png" data-lightbox="a" data-title="A* algorithm realization">
    </a>
    <p class="describing">
        My realization of A* pathfinding algorithm.
    </p>
</div>

<div class="project">
    <a href="img/projects/fl/fl1.png" data-lightbox="fl" data-title="Follow the light">
        <img class="projimfl" src="img/projects/fl/flcover.jpg" onmouseover="this.src='img/projects/fl/fl1.png'" onmouseout="this.src='img/projects/fl/flcover.jpg'"/>
    </a>
    <a class="hidden" href="img/projects/fl/fl2.png" data-lightbox="fl" data-title="Follow the light">
    </a>
    <a class="hidden" href="img/projects/fl/fl3.png" data-lightbox="fl" data-title="Follow the light">
    </a>
    <p class="describingfl">
        Very hard game with cute graphics.
        Called "Follow the light".
    </p>
</div>

CSS:

body{
    background-size: overlay;
    background: rgb(72, 158, 136);
}


.project{
    margin:2% 1% 1% 3%; 
    padding-top: 1em;
    background: #FFF;
    width: 12em;
    height: 19em;
    display: inline-block;

    box-shadow: 0 0 1em #272727;
}

.projim{
    display: table;
    width: 8em;
    height: 13em;
    margin: auto;

}

.describing{
    color:#6a6a6a; 
    font-family: 'Roboto', sans-serif;
    text-decoration: none;
    font-size: 1em;
    text-align: center;

    border-top: 1px dashed #a39e9e; 
    margin-top:  1em;
    padding-top: 1em;
}

.projimfl{
    display: table;
    width: 8em;
    height: 7em;
    margin: auto;

}

.describingfl{
    color:#6a6a6a; 
    font-family: 'Roboto', sans-serif;
    text-decoration: none;
    font-size: 1em;
    text-align: center;

    border-top: 1px dashed #a39e9e; 
    margin-top:  6em;
    padding-top: 1em;
}

.hidden{
    visibility: hidden;
}

===============>>#1 票数:5 已采纳

答案很简单,最好设置inline-block元素(您的.project

vertical-align: top ;

或任何其他属性值https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
为了防止由于内容流而导致的未对准。

演示

  ask by Animus translate from so

未解决问题?本站智能推荐: