Question

我在包含6个其他div的mainContent div上应用了box shadow，但是box shadow应用于最后两个浮动div上方mainContent div的部分。

HTML：

<div id="mainContent">
    <div id="div1">
            <h1>Welcome to the Archive </h1>

            <h2>The Internet Archive, is a digital library of files and other cultural 
                artifacts in digital form.</h2>

    </div>
    <div class="div11">
            <h3>Archive 1</h3>

        <p>some info</p>
    </div>
    <div class="div12">
            <h3>Archive 2</h3>

        <p>info</p>
    </div>
    <div class="div13">
            <h3>Archive 3</h3>

        <p>info</p>
    </div>
    <div class="left">
            <h4>Jasdasdasdasd</h4>

        <p><em>some info on how to use the website</em>

        </p>
    </div>
    <div class="right">
            <h3>archive1</h3>

        <p>Most recently added archives comes here</p>
        <br />
            <h3>asdasdsd</h3>

        <p>Most recently added archives comes here</p>
    </div>

</div>

CSS：

#mainContent {
    width:970px;
    padding-bottom:55px;
    /*equal to footers height*/
    background:#fff;
    margin-bottom:10px;
    padding:10px 10px 10px 10px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border-bottom-left-radius:3px;
    border-bottom-right-radius:3px;
    box-shadow: 0 0 20px #ccc;
}
.left {
    float: left;
    width: 250px;
    height:auto;
}
.right {
    float: right;
    width: 630px;
    margin: 0 0 20px;
    height:auto;
}

Answer 1

添加：

<div style="clear: both"></div>

位于div附近的底部。

http://jsfiddle.net/3LxkY/2/

Answer 2

试试这个.............

#mainContent{
            width:970px;
            padding-bottom:55px;
            /*equal to footers height*/
            background:#fff;
            margin-bottom:10px;
            padding:10px 10px 10px 10px;
           -moz-border-radius: 5px;
            border-radius: 5px;
            border-bottom-left-radius:3px;
            border-bottom-right-radius:3px;
            box-shadow: 0 0 20px #ccc;
            overflow: hidden;
            }
      .left{
           float: left;
           width: 250px;
           height:auto;
           }
     .right{
          float: right;
          width: 630px;
          margin: 0 0 20px;
          height:auto;
          }

应用于容器div的box shadow切断了最后两个浮动子div

2 个答案: