100％宽度的div与箱子阴影ovelaps父div

我有一个居中的容器div，目前有3个其他divs里面。它们都有框阴影（结果添加了大约5px的边距）。100％宽度的div与箱子阴影ovelaps父div

我遇到的问题是第一个div（即将发布）是100％宽度，并且在右侧（overflow: hidden已设置）被截断。或者它溢出它包含div一点。这样可以，但下面的其他2个div浮动并排，因此不会溢出一点（如果size设置为比可用空间更大，则最近的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>

来源

2012-12-30 DominicM

请发表html。 –

是的请html，我试图帮助，如果更多的信息将是真棒http://jsbin.com/uharax/1/ –

添加HTML，请参阅编辑。 – DominicM

因此，如果我们改变改变

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

到

.widget.upcoming{ 
    height:380px; 
}

，我认为它应该工作

http://jsbin.com/uharax/1

来源

2012-12-30 19:35:16

似乎工作，但它会一直扩展到100％？我的意思是现在只是因为文本默认为100％。如果我只有固定的宽度/高度div并且没有文字会怎么样？ – DominicM

其实，它似乎工作得很好，因为里面的元素有自动保证金。 – DominicM

这真棒，真的很开心它适合你。只是我正在玩它，http://jsbin.com/uharax/5/。如果您想将宽度设置为100％并将其浮动到左侧，请删除边距：4px;形式.widget因为它增加了元素周围的大小。我们也可以使用box-sizing，所以边框将在元素宽度内。里面还加了一些盒子。检查示例。有一个美好的一天:) –

100％宽度的div与箱子阴影ovelaps父div

回答

相关问题