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

回答

相關問題