박스 섀도우가 하단에서 완료되지 않았습니다.

이미지 보더 하단의 박스 섀도우가 보이지 않습니다. 나는 그것의 cutted 생각하고 내가 뭘 해야할지 모르겠다 ... 어쩌면 기사 heigher의 높이를 설정? 여기 페이지 Page 및 코드박스 섀도우가 하단에서 완료되지 않았습니다.

*{ 
 
    padding: 0px; 
 
    margin: 0px; 
 
    font-family: Raleway; 
 
    line-height: 20px; 
 
} 
 

 
body{ 
 
    background-image: url(images/hintergrund.png); 
 
} 
 

 
section{ 
 
    margin-top: 20px; 
 
    width: 1100px; 
 
    background: white; 
 
    border: 2px solid black; 
 
\t box-shadow: 8px 8px 10px 0px rgba(0,0,0,0.75); 
 
    
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    padding: 20px; 
 
} 
 

 
article{ 
 
    width: 100%; 
 
    overflow: hidden; 
 
} 
 

 
.bild{ 
 
    height: 200px; 
 
    width: 200px; 
 
    float: left; 
 
    border: 2px solid black; 
 
\t box-shadow: 8px 8px 10px 0px rgba(0,0,0,0.75); 
 
} 
 

 
.text{ 
 
    float: right; 
 
    width: 860px; 
 
    word-wrap: break-word; 
 
    height: 200px; 
 
}

<html> 
 
    <head> 
 
     <title>Homepage</title> 
 
     <link rel="stylesheet" href="index.css"> 
 
     <link href='http://fonts.googleapis.com/css?family=Raleway:600' rel='stylesheet' type='text/css'> 
 
     
 
     
 
     <!-- include jQuery library --> 
 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
 
     <!-- include Cycle plugin --> 
 
     <script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script> 
 

 
     <script type="text/javascript"> 
 
      $(document).ready(function() { 
 
       $('.bild').cycle({ 
 
        fx: 'scrollRight', 
 
        next: '.bild', 
 
        timeout: 0 
 
       }); 
 
      }); 
 
     </script>    
 
    </head> 
 
    <body> 
 
     <section> 
 
      <article> 
 
       <div class="bild"> 
 
\t \t <img src="http://malsup.github.com/images/beach1.jpg" width="200" height="200" /> 
 
\t \t <img src="http://malsup.github.com/images/beach2.jpg" width="200" height="200" /> 
 
\t \t <img src="http://malsup.github.com/images/beach3.jpg" width="200" height="200" /> 
 
\t \t <img src="http://malsup.github.com/images/beach4.jpg" width="200" height="200" /> 
 
\t \t <img src="http://malsup.github.com/images/beach5.jpg" width="200" height="200" /> 
 
       </div> 
 
      </article> 
 
     </section> 
 
    </body> 
 
</html>

이다 ........................... ....................

출처

2015-01-10 Skeptar

overflow: hidden은 (은) article입니다. 대신 clearfix를 사용하는 대신, 이미지

FIDDLE

overflow:hidden는 소리를 정확하게 수행

.bild{ 
    height: 200px; 
    width: 200px; 
    float: left; 
    border: 2px solid black; 
    box-shadow: 8px 8px 10px 0px rgba(0,0,0,0.75); 
    overflow: hidden; 
}

을 숨길

.article:after{ 
    content: ''; 
    display:block; 
    clear: both; 
}

및 .bild에 오버 플로우를 추가하는 것은 그 경계를 오버 플로우 아무것도 숨 깁니다. 일반적으로이 도구를 사용하여 명확한 부유물 문제 (예 : 알지 못하던간에)와 숨겨진 이미지 (숨겨진 이미지)를 숨길 수 있지만 경우에 따라서는 상자 그림자가 연장되지 않습니다. 과거의 경계. 따라서 clearfix를 사용하면 박스 그림자를 숨기지 않고 수레를 지울 수 있습니다.

출처

2015-01-10 22:12:39 jmore009

빠른 응답을위한 Thx! :) 그것은 작동합니다. 그러나 overflow와 hiddenfix 사이의 차이점은 무엇입니까? – Skeptar

@Skeptar이 (가) 내 대답을 업데이트했습니다. – jmore009

답변 해 주셔서 감사합니다. – Skeptar

박스 섀도우가 하단에서 완료되지 않았습니다.

답변

관련 문제