html - DIV 位置因内容长度而异

Question

我正在处理我的旅游主页，我的 DIV 容器遇到了问题。根据内容的长度，以下容器的位置会发生变化。很难解释 - 请查看 http://reisen-test.hoho06.ch只要所有容器都包含两行描述文本，它看起来就没问题 - 但一旦描述长度发生变化，容器就会跳来跳去。

这是CSS的相关部分

div.roundobject {
    height: 10em;
    width: 30em;
    background-color: #E0E0E0;
    position: relative;
    margin:   0.8em 1.6em 0.8em 0em; /*top - right - bottom - left*/
    padding: 0px;
    display: inline-table;
    border-radius: 5em;
    -webkit-border-radius: 5em;
    -moz-border-radius: 5em;
}

a:hover > div.roundobject > div > h2   {
    color: #990000;
}

div.roundobject > div   {
    display: table-cell;
    vertical-align: middle;
    padding-left: 11em;
}

div.roundobject > img   {
    height: 10em;
    width: 10em;
    object-fit: cover;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    position: absolute;
    margin: -2px;
}

div.roundobject > div > img.newObjectMarker {
    z-index: 99;
    transform: rotate(45deg);
    max-width: 2em;
}

div.roundobject > div > h2    {
    display: inline; 
}

div.roundobject > div > span  {
    display: block;
}

目前内容是这样构建的:

<a href="http://reisen-test.hoho06.ch/group/details/europa"><div class="roundobject colorborder"><img class="colorborder" src="http://reisen-test.hoho06.ch//photo/thumb/3-6"><div><h2>Europa</h2><img class="newObjectMarker" src="http://reisen-test.hoho06.ch/img/new.png"><span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut l</span></div></div></a>

(最简单的方法是使用浏览器中的任何开发工具查看)

有什么解决方案的提示吗？

Answer 1

将以下行添加到所有 div:

div{
    box-sizing:border-box;
}