問題與嵌套CSS的div /箱和溢出

您好我只是想知道如果有人能幫助我。我足夠新的網頁設計，並且我的CSS有一些問題。問題與嵌套CSS的div /箱和溢出

基本上我無法弄清楚如何正確巢我的div /盒，而無需溢出的問題！我曾嘗試使用overflow: hidden;但這仍然無法正常工作，我也嘗試將子元素向左或向右移動以查看是否會有所幫助，但仍然沒有運氣！

我的CSS是這樣的：

#customerReg { 
    width: 47%; 
    height: 480px; 
    float: left; 
    background: #FFF; 
    padding: 10px 10px 10px 10px; 
    display: inline; 
    margin-top: 10px; 
    -moz-border-radius: 20px; 
    -webkit-border-radius: 20px; 
    overflow: hidden; 
}  

#customerInfo { 
    width: 95%; 
    height: 120px; 
    background: #414141; 
    padding: 10px; 
    margin-bottom: 10px; 
    -moz-border-radius: 15px; 
    -webkit-border-radius: 15px; 
    overflow: hidden; 
} 

#participantReg { 
    width: 47%; 
    height: 480px; 
    float: right; 
    background: #FFF; 
    padding: 10px; 
    margin-top: 10px; 
    -moz-border-radius: 20px; 
    -webkit-border-radius: 20px; 
    overflow: hidden; 
} 

#participantInfo { 
    width: 95%; 
    height: 120px; 
    background: #414141; 
    padding: 10px; 
    margin-bottom: 10px; 
    -moz-border-radius: 15px; 
    -webkit-border-radius: 15px; 
    overflow: hidden; 
}

我的HTML如下：

<div class="contentbody" style="border:#FF0066 solid 2px;"> 

    <div id="customerReg" style="border:#33CC00 solid 2px"> 
    <div id="customerInfo"> 
     <p>Customer Registration 

     </p> 
    </div> 

    <!-- End of customerReg --></div> 

    <div id="participantReg" style="border:#33CC00 solid 2px"> 
     <div id="participantInfo"> 
      <p>Participant Sign Up</p> 
      <p>&nbsp;</p> 
     </div> 

    <!-- End of participantReg --></div> 


    <!-- end .contentbody --></div>

什麼IM瞄準是如此有並排兩個圓形盒子一側這些盒子內部的兩個小箱子。我試圖張貼圖像，但它不會讓我！即將得到的是，如果有意義的話，兩個內部盒子都溢出到外部盒子的右側？

誰能告訴我在哪裏，我去錯了，我能做些什麼來糾正這是香港專業教育學院花了幾個小時試圖找到一個答案並且不能看着辦吧！

來源

2012-03-05 DannyW86

我試圖複製並不能。在http://jsfiddle.net上設置一個導致問題的例子，以便我們看到發生了什麼 – Henesnarfel 2012-03-05 20:31:03

如果設置的第一div框寬度並排AR側：

看看這個fiddle

.contentbody{ width:990px; border:#FF0066 solid 2px; }

來源

2012-03-05 20:31:54 Preston

這不是OP所具有的問題。如果我在不設置寬度的情況下加寬框架，我可以得到與您相同的結果。他表示內部的灰色框正在溢出綠色的邊界區域。 – Henesnarfel 2012-03-05 20:35:37

哦..一定..我誤解了這個問題......抱歉.. – Preston 2012-03-05 20:38:31

@Henesnarfel即時通訊也不太清楚如何使用的jsfiddle顯示我的問題，我試圖進入我的代碼，但它並沒有顯示我是有這個問題，這表明其他的一個盒子！即時通訊使用Dreamweaver和一直在液體模板上工作，如果這有所作爲？是的，如上所述，內箱從外箱中溢出，但在兩種情況下都是向右移動！普雷斯頓你做的小提琴是我希望它看起來，但這不是什麼即時通訊！ – DannyW86 2012-03-05 21:10:23

父DIV集：

溢出：隱藏;

#customerReg, #participantReg{ 
    float:left; 
} 

.contentbody:after{ 
    content: '.'; 
    clear:both; 
    visibility: hidden; 
    *zoom:1; 
    height:0; 
    display:block; 
}

來源

2012-03-05 21:18:49 Philip

溢出：隱藏;不解決問題。香港專業教育學院也嘗試過，你建議，仍然沒有改變對.contentbody的CSS cahnges！?? – DannyW86 2012-03-05 22:06:20

我有一個錯字我用#customerReg兩次而不是改進的答案！確保.contentbody：位於樣式表的最後。如果你使用的IE可能包含modernizr，所以：在psudeo之後是不可用的。 – Philip 2012-03-05 22:14:34

我已經嘗試將兩個框都設置爲float：left;並嘗試過放置.contentbody：在我的內部和外部樣式結束後仍然沒有任何結果？我使用Firefox。 – DannyW86 2012-03-05 22:34:22

問題與嵌套CSS的div /箱和溢出

回答

相關問題