Позиции DIV отличаются в зависимости от длины контента - PullRequest
Новая
       16

Позиции DIV отличаются в зависимости от длины контента

0 голосов
/ 26 сентября 2018

Я работаю над своей домашней страницей путешествий и сталкиваюсь с проблемой с моими контейнерами 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>

(проще всего было бы, если бы вы увидели какие-либо инструменты разработчика из браузера, чтобы увидеть)

Любой совет для решения?

Ответы [ 3 ]

0 голосов
/ 26 сентября 2018

misorude: Укажите выравнивание по вертикали, которое вы хотите для элементов a.

Мне нужно было добавить выравнивание по вертикали в "main div" класс "roundobject" - теперь этоотлично работает.

Благодаря misorude

0 голосов
/ 26 сентября 2018

Добавление 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>
0 голосов
/ 26 сентября 2018

добавить следующую строку ко всем элементам: 

div{
    box-sizing:border-box;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...