Почему зависание элемента в div влияет на divs siblings?

Я поставляю две фотографии, чтобы показать, что происходит. Перед зависания:Почему зависание элемента в div влияет на divs siblings?

После зависания:

-код XHTML:

<body> 
     <div> 
     <div class="channel"><img src="./logos/svt1.png" alt="Channel logotype" /><div class="chName">SVT1</div> 
      <ul> 
       <li> 
        <div class="prog">01.20 Plus</div> 
        <div class="info">Program info here</div> 
       </li> 
       <!--more <li>--> 
      </ul> 
     </div> 
     <div class="channel"><img src="./logos/svt2.png" alt="Channel logotype" /><div class="chName">SVT2</div> 
      <ul> 
       <li> 
        <div class="prog">01.00 Rapport</div> 
        <div class="info">Program info here</div> 
       </li> 
       <!--more <li>--> 
      </ul> 
     </div> 
     <!-- and more <div> --> 
     </div> 
    </body>

А вот мой CSS:

body{ 
position: absolute; 
} 

img{ 
    position: relative; 
    top: 0; 
    height: 60px; 
    width: auto; 
    margin-left: 30px; 
} 

ul{ 
    list-style-type: none; 
    font-size: 12px; 
} 

li{ 
    padding-bottom: 1em; 
} 

li:hover .info{ 
    display: block; 
} 

li:hover{ 
    border: solid 1px darkgrey; 
} 

div{ 
    display: table; 
} 

.channel{ 

    display: inline-block; 
    width: 32%; 
    height: auto; 
    padding: 5px; 
    top: 0; 
} 

.chName{ 
    position: relative; 
    float: right; 
    top: 0; 
    margin-top: 30px; 
    margin-right: 40%; 
    font-weight: bold; 
} 

.info{ 
    display: none; 
    font-weight: bold; 
}

Так что мне интересно, почему зависание <li> влияет на <div> с классом = channel и как исправить это.

Если требуется более подробная информация, прокомментируйте. Благодаря

EDIT: http://jsfiddle.net/robbannn/53j38uyh/

источник

2015-10-15 robbannn

Вы не могли бы сделать jsFiddle? –

Я могу абсолютно попробовать! – robbannn

Это потому, что .channel установлен в display: inline-block;, что означает вертикальное выравнивание почитается. Вертикальное выравнивание по умолчанию для встроенных элементов - baseline. Когда вы наводите курсор на li, вы меняете .info на display: block;, что означает, что исходный код отличается.

Чтобы исправить это, добавьте vertical-align: top; в .channel, это гарантирует, что .channel всегда выровнен в верхней части родителя.

body { 
 
    position: absolute; 
 
} 
 
img { 
 
    position: relative; 
 
    top: 0; 
 
    height: 60px; 
 
    width: auto; 
 
    margin-left: 30px; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    font-size: 12px; 
 
} 
 
li { 
 
    padding-bottom: 1em; 
 
} 
 
li:hover .info { 
 
    display: block; 
 
} 
 
li:hover { 
 
    border: solid 1px darkgrey; 
 
} 
 
div { 
 
    display: table; 
 
} 
 
.channel { 
 
    display: inline-block; 
 
    width: 32%; 
 
    height: auto; 
 
    padding: 5px; 
 
    top: 0; 
 
    vertical-align: top; 
 
} 
 
.chName { 
 
    position: relative; 
 
    float: right; 
 
    top: 0; 
 
    margin-top: 30px; 
 
    margin-right: 40%; 
 
    font-weight: bold; 
 
} 
 
.info { 
 
    display: none; 
 
    font-weight: bold; 
 
}

<div> 
 
    <div class="channel"> 
 
    <img src="./logos/svt1.png" alt="Channel logotype" /> 
 
    <div class="chName">SVT1</div> 
 
    <ul> 
 
     <li> 
 
     <div class="prog">01.20 Plus</div> 
 
     <div class="info">Program info here</div> 
 
     </li> 
 
     <!--more <li>--> 
 
    </ul> 
 
    </div> 
 
    <div class="channel"> 
 
    <img src="./logos/svt2.png" alt="Channel logotype" /> 
 
    <div class="chName">SVT2</div> 
 
    <ul> 
 
     <li> 
 
     <div class="prog">01.00 Rapport</div> 
 
     <div class="info">Program info here</div> 
 
     </li> 
 
     <!--more <li>--> 
 
    </ul> 
 
    </div> 
 
    <!-- and more <div> --> 
 
</div>

источник

2015-10-15 08:24:17

Спасибо за быстрый ответ! И хорошее объяснение! – robbannn

Без проблем, рад, что я мог бы помочь. –

Почему зависание элемента в div влияет на divs siblings?

ответ

Смежные вопросы