CSS-тень, не появляющаяся на элементе с тем же классом

Я создаю портфолио для школьного задания, но я сталкиваюсь с раздражающей мелочью. У меня есть два элемента с одинаковым классом. Я определил тень для этого класса с помощью css, первый элемент показывает тень окна, а второй не ...CSS-тень, не появляющаяся на элементе с тем же классом

Мне кажется логичным, что оба элемента должны иметь тень сейчас .. Вот это веб-страница: http://wouterjanson.nl

здесь сечение HTML:

<div class="container"> 
    <main class="content"> 
     <article class="content_item"> 
      <img src="img/post_img_home.png" alt="Html code"> 
       <h1>Home - Portfolio Wouter Janson</h1> 

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempor lorem sit amet quam condimentum pretium. Etiam quis odio a nisl varius rutrum. Maecenas mattis mi ac est finibus, quis pulvinar lacus finibus. Mauris id dui nunc. Donec ornare eros a laoreet rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam eget libero metus. Etiam at rhoncus metus, non condimentum erat. Sed sed sodales turpis, lacinia bibendum nisl. Integer sagittis metus quis lectus auctor, et elementum nisl pretium. Nulla facilisi. Proin lobortis leo nisl, a consequat turpis ullamcorper eget. Curabitur quis bibendum odio.</p> 
     </article> 
     <article class="content_item"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempor lorem sit amet quam condimentum pretium. Etiam quis odio a nisl varius rutrum. Maecenas mattis mi ac est finibus, quis pulvinar lacus finibus. Mauris id dui nunc. Donec ornare eros a laoreet rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam eget libero metus. Etiam at rhoncus metus, non condimentum erat. Sed sed sodales turpis, lacinia bibendum nisl. Integer sagittis metus quis lectus auctor, et elementum nisl pretium. Nulla facilisi. Proin lobortis leo nisl, a consequat turpis ullamcorper eget. Curabitur quis bibendum odio.</p> 
     </article> 
    </main> 
</div>

А вот класс CSS:

.container { 
    width: 100%; 
    float: left; 
    overflow: hidden; 
    margin-bottom: 30px; 
} 
.content_item { 
    background-color: #ffffff; 
    border-radius: 4px; 
    box-shadow: 0px 1px 1px 0px rgba(145, 145, 145, 0.5); 
    margin-top: 30px; 
}

источник

2014-10-21 The_Xylon

Оба имеют падающую тень при испытании : http://jsfiddle.net/xfd59q0v/1/ – Askanison4

Действительно - http://jsfiddle.net/xy53e138/ –

Я вижу, что это работает .. Но не на моем сайте, первая страница видна онлайн: http: // wouterjanson.nl, так как вы можете видеть второй e lement не имеет тени. –

У вас есть overflow:hidden на вашем элементе контейнера. Просто удалите его.

.container { 
width: 100%; 
float: left; 
/* overflow: hidden; */ 
margin-bottom: 30px; 
}

источник

2014-10-21 09:37:00

Вы дать padding-bottom на контейнере

.container { 
width: 100%; 
float: left; 
overflow: hidden; 
margin-bottom: 30px; 
padding-bottom: 10px; 
}

источник

2014-10-21 09:38:36

но DIV контента (родителя .content_item) до 582 вместо 479 :) .content{height: 582px;}

источник

2014-10-21 09:45:30

CSS-тень, не появляющаяся на элементе с тем же классом

ответ

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