div之外的css div

對不起再次請求css幫助，但我確實無法得到這個。我的問題是，一個子分區超出了上游分區的範圍。我試過使用：div之外的css div

display: inline-block;`

但這使得外部div發瘋。

我的問題： enter image description here

沒有與側邊欄的ID，其中包含左框一個div。這是另一個div與主要的ID。

HTML：

<div id="main"> 
      <div id="sidebar"> 
       <div id="box"> 
        <h3>Recently Uploaded</h3> 
        <ul> 
         <li><a href="#">402 Base</a></li> 
         <li><a href="#">heli mod</a></li> 
         <li><a href="#">mw2 menu 1.14</a></li> 
         <li><a href="#">402 Base</a></li> 
         <li><a href="#">heli mod</a></li> 
         <li><a href="#">mw2 menu 1.14</a></li> 
         <li><a href="#">402 Base</a></li> 
         <li><a href="#">heli mod</a></li> 
         <li><a href="#">mw2 menu 1.14</a></li> 
         <li><a href="#">402 Base</a></li> 
        </ul> 
       </div> 
          ...

CSS：

#main 
{ 
    width: 80%; 
    height: 100%; 
    background: rgb(255, 255, 255); 
    background: rgba(255, 255, 255, .4); 
    margin-left: auto; 
    margin-right: auto; 
} 

#sidebar 
{ 
    height: 100%; 
    width: 20%; 
    float: left; 
    margin-left: 20px; 
    margin-right: 20px; 
    margin-bottom: 20px; 
    margin-top: 60px; 
} 

#box 
{ 
    /* min-width: 12em; idk if I wanted this */ 
    width: 100%; 
    background-color: #F8F8F8; 
    border: 1px solid #000; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    margin-bottom: 15px; 
    font-family: Arial, Helvetica, sans-serif; 
    display: inline-block; 
} 

#box p 
{ 
    padding: 10px; 
} 

#box h3 
{ 
    margin: 0; 
    margin-top: 5px; 
    padding-left: 10px; 
    border-bottom: 1px solid #000; 
    font-size: 12pt; 
    font-weight:bold; 
} 

#box ul 
{ 
    font-size: 10pt; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 

#box ul li 
{ 
    width: 100%; 
    height: 40px; 
    line-height: 40px; 
    border-bottom: 1px solid #000; 
}

我能做什麼？ :(

來源

2013-07-16 MysteryDev

您可以添加http://jsfiddle.net/ – FSou1

#main {明確：既;} – Orangepill

習慣了這種方式http://jsfiddle.net/rohit_azad/ADMKf/ –

試試這個：

display:table; /* TO our main ID */

來源

2013-07-16 05:36:04 GilbertOOl

感謝它的工作，你會解釋一下嗎？ – MysteryDev

您也可以在#main中添加「overflow：hidden;」或「overflow：visible;'以及#main。這將爲您解決它。 –

是的，但它會花費太長的時間有解釋;-) – GilbertOOl

嘗試加入float: left;到#main

來源

2013-07-16 05:30:17 Tzach

我我會嘗試並回報 – MysteryDev

http://puu.sh/3E2pM/6c79edc6c3.jpg將其移動到左側並完全忽略邊距左邊和邊距右邊的自動 – MysteryDev

Gilbert001解決了我的問題，謝謝！ – MysteryDev

應該工作的跨瀏覽器，並具有極佳的瀏覽器支持將應用以下到您#main DIV A液：

#main{ 
    ... 
    overflow: hidden; 
}

使用此選項將強制任何浮動元素計算到容器的高度dr澳威背景，邊框等

來源

2013-07-16 05:41:35 Nightfirecat

這是一個更好的解決方案。這裏是jsfiddle：http://jsfiddle.net/FGbWy/ –

隨着我的CSS（可能是低劣的），這只是削減了子div。顯示：表格;是我能用它來運作的。 – MysteryDev

@ Jakes625根據Robert的建議，可能嘗試'overflow：auto'或'overflow：visible'，可以嗎？ – Nightfirecat

div之外的css div

回答

相關問題