CSS問題：固定柱+自動柱內

嵌套自動列我有以下HTML結構：CSS問題：固定柱+自動柱內

<div id="main-container"> 
    <div id="left-column">...</div> 
    <div id="right-column">...</div> 
</div>

我的CSS：

#main-container 
{ 
    width:80%; 
    margin:20px auto;  
} 

#left-column 
{ 
    width:400px; 
    float:left; 
} 

#right-column 
{ 
    width:100%; 
    float:right; 
    padding:26px 0 0 0; 
}

非常典型的佈局，沒有什麼花哨。但我不明白的是，爲什麼右列不是佔據主容器中的空間（因此整個屏幕的80％減去400px），它橫跨整個主容器並被推到左邊的下方，柱。

我試着將它的寬度設置爲70％，直到我調整窗口大小，然後右列與左列重疊。

謝謝！

來源

2011-08-21 barjed

將右列的寬度設置爲100％意味着它將佔用容器的全部寬度，而不是全部寬度減去容器內的其他元素。

建議你實現通過柱結構（其中，一列具有固定寬度和其他需要的剩餘空間）中的列如下：

#left-column 
{ 
    width: 400px; 
    float: left; 
}  
#right-column 
{ 
    padding: 26px 0 0 0; 
    margin-left: 410px; 
}

下面是一個example。

來源

2011-08-21 11:44:24 Amit

但是不會在這個右列示例的大小取決於其內容的大小？ – barjed

該示例幫助，謝謝。 – barjed

不，它不是浮動的，所以它會使用所有可用的寬度（所有塊級別的元素都會） – xec

我不能，雖然明白是爲什麼右欄，而不是佔用了它在主容器的空間（所以80％的整個屏幕零下400像素）

這是因爲寬度：100％;是它的包含元素的100％（＃主容器的100％） - ＃右列不關心任何兄弟元素上的400px（即＃左列）

來源

2011-08-21 11:50:17 xec

CSS問題：固定柱+自動柱內

回答

相關問題