Question

我有一个居中的容器div，里面有3个其他的div。它们都有盒子阴影（因此添加了约5px的边距）。

我遇到的问题是第一个div（即将推出）是100％宽度，并且在右侧切断（overflow: hidden已设置）。或者溢出它包含div一点点。这样就可以了，但是下面的其他两个div是并排浮动的，所以不要溢出甚至一点点（如果大小被设置为超过可用空间，最近的div会在最新的情况下移动）。

填充没有帮助。除了将宽度设置为98％之外，还有其他解决方案吗？

这是我正在使用的CSS：

.mainSection{
    width:1020px;
    margin:70px auto 0px auto;
}

.widget{
    background-color:rgba(255, 255, 255, 0.5);
    -webkit-box-shadow:0 0 5px 2px #CCC;
    -moz-box-shadow:0 0 5px 2px #CCC;
    box-shadow:0 0 5px 2px #CCC;
    border:1px solid #CCC;
    margin:4px;
    overflow:hidden;
}

/* 3 child divs */

.widget.upcoming{
    float:left;
    width:100%;
    height:380px;
}

.widget.recent{
    float:right;
    width:260px;
    height:auto;
}

.widget.latest{
    float:left;
    width:740px;
    height:460px;
}

<section class="mainSection">
    <article class="widget upcoming">
        <header>
            <h3>Upcoming</h3>
        </header>
    </article>
    <article class="widget news">
        <article>
            <p>Some text</p>
        </article>
    </article>
    <article class="widget latest">
        <header>
            <h3>Latest</h3>
        </header>
    </article>
    <aside class="widget recent">
        <header>
            <h3>Recent</h3>
        </header>
    </aside>    
</section>

Answer 1

所以如果我们改变了改变

.widget.upcoming{
   float:left;
   width:100%;
   height:380px;
}

到

 .widget.upcoming{
    height:380px;
 }

我认为应该有效

http://jsbin.com/uharax/1

带有框阴影的100％宽度div与父div重叠

1 个答案: