我正在处理我的旅游主页,我的 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>
(最简单的方法是使用浏览器中的任何开发工具查看)
有什么解决方案的提示吗?
最佳答案
将以下行添加到所有 div:
div{
box-sizing:border-box;
}
关于html - DIV 位置因内容长度而异,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52511437/