Question

我看不到图像边框底部的盒子阴影。我认为它的切割和我不知道我要做什么...也许设置文章的高度更高？这是Page 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;
	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;
	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">
		<img src="http://malsup.github.com/images/beach1.jpg" width="200" height="200" />
		<img src="http://malsup.github.com/images/beach2.jpg" width="200" height="200" />
		<img src="http://malsup.github.com/images/beach3.jpg" width="200" height="200" />
		<img src="http://malsup.github.com/images/beach4.jpg" width="200" height="200" />
		<img src="http://malsup.github.com/images/beach5.jpg" width="200" height="200" />
                </div>
            </article>
        </section>
    </body>
</html>

...............................................

Answer 1

这是因为overflow: hidden上有article。请改用clearfix：

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

并在.bild添加溢出，而不是隐藏您的图片

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

FIDDLE

overflow:hidden完全听起来，隐藏任何溢出边界的东西。您通常可以使用它来执行清除浮动问题（无论您是否知道它正在执行）和隐藏图像（您也在做），但在某些情况下（这是一个）它会阻止您的盒子阴影延伸超越它的界限。所以使用clearfix会清除你的花车，而不会隐藏盒子阴影。

盒子阴影底部不完整

1 个答案: