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;
}

Answer 2

misorude：为a元素指定所需的垂直对齐。

我需要将vertical-align添加到“ main div”类“ roundobject”中-现在可以正常使用了。

多谢！

Answer 3

添加div.roundobject > div{ padding-right: 2em; }将解决您的问题。下面是更新的代码：

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;
    padding-right: 2em;
}

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);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    max-width: 2em;
}

div.roundobject > div > h2    {
    display: inline; 
}

div.roundobject > div > span  {
    display: block;
}

<html lang="en"><head>
    <meta charset="utf-8">
    <title>HoHoUn - Gruppen</title>    <link rel="stylesheet" type="text/css" href="http://reisen-test.hoho06.ch/css/format.css">
    <link rel="shortcut icon" type="image/x-icon" href="http://reisen-test.hoho06.ch/img/MultisizeIcon.ico">
    <script src="http://reisen-test.hoho06.ch/js/jquery-3.2.1.min.js" type="text/javascript"></script>
    
    <script src="http://reisen-test.hoho06.ch//js/TileTextOnHover.js" type="text/javascript"></script></head>
<body background="http://reisen-test.hoho06.ch/img/background.jpg">
<div class="contentcontainer alignoncenter padding15">
<header>

<a href="http://reisen-test.hoho06.ch/">
    <img id="logo" class="colorborder" src="http://reisen-test.hoho06.ch/img/Logo.png">
</a>

<span id="headertext">Reisen um die Welt mit Sabrina und Markus</span>

</header>
<article>

<a href="http://reisen-test.hoho06.ch/group/details/asien"><div class="roundobject colorborder" style="
    position: relative;
"><img class="colorborder" src="http://reisen-test.hoho06.ch//photo/thumb/2-4"><div style="
    position: absolute;
    top: 0;
    left: 0;
"><h2>Asien</h2><img class="newObjectMarker" src="http://reisen-test.hoho06.ch/img/new.png"><span>Reisen in die Länder der aufgehenden Sonne.</span></div></div></a><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><a href="http://reisen-test.hoho06.ch/group/details/nordamerika"><div class="roundobject colorborder"><img class="colorborder" src="http://reisen-test.hoho06.ch//photo/thumb/4-8"><div><h2>Nordamerika</h2><img class="newObjectMarker" src="http://reisen-test.hoho06.ch/img/new.png"></div></div></a><a href="http://reisen-test.hoho06.ch/group/details/ozeanien"><div class="roundobject colorborder"><img class="colorborder" src="http://reisen-test.hoho06.ch//photo/thumb/5-10"><div><h2>Ozeanien</h2><span>Auch eine Insel kann schön sein.</span></div></div></a><a href="http://reisen-test.hoho06.ch/group/details/tagesausfluege"><div class="roundobject colorborder"><img class="colorborder" src=""><div><h2>Tagesausflüge</h2><span>Die kurzen Ausflüge, welche die Gruppe "Europa" sprengen würde...</span></div></div></a>
</article><footer>
<p class="tripfooter">© Design by Markus H. / © Content by Sabrina &amp; Markus</p>
</footer>
</div>

</body></html>

DIV位置因内容长度而异

3 个答案: