twitter bootstrap：2列容器，一邊可變高度，另一邊100％

我有一個容器，設置爲overflow-x: hidden;，它包含一系列行。行被分成兩列。隨着右列內容的變化，左列需要能夠增長和縮小。佈局是這樣的：twitter bootstrap：2列容器，一邊可變高度，另一邊100％

<div class="no-x-overflow"> 
    <div class="data-row container-fluid"> 
    <div class="left-column pull-left"> 
     <a href="#"></a> 
    </div> 
    <div class="right-column pull-left"> 
     <div class="detail-row1"></div> 
     <div class="detail-row2"></div> 
     <div class="detail-row3"></div> 
    </div> 
    </div> 
</div>

各種detail-row的div可以隱藏，並在UI透露，造成data-row收縮和擴張。 left-column div需要能夠做到這一點。我可以給各個部分上的height什麼價值，使他們工作。

樣式：

.no-x-overflow { 
    overflow-x: hidden; 
} 

.data-row { 
    overflow: hidden; 
    clear: both; 
} 

.left-column { 
    width: 10%; 
    height: 100%; 
    padding: 10px; 
    border-right: 1px solid #999; 
} 

.right-column { 
    width: 90%; 
}

來源

2013-01-24 Kevin Whitaker

這個問題是很難不爲什麼左列需要增長和收縮到右列匹配上下文回答。例如，如果我試圖給左列一個與右列相匹配的背景顏色或邊框，我只會將該背景顏色給容器，然後在右列上應用不同的背景。這是我正在談論的一個小提琴。 http://jsfiddle.net/BY2Xh/1/

.data-row { 
overflow: auto; 
width: 100%; 
position: relative; 
background: yellow; 
} 

.left-column { 
width: 10%; 
box-shadow: 1px 0 0 solid #999; 
float: left; 
} 

.right-column { 
width: 90%; 
box-shadow: 0 0 0 1px red; 
float: left; 
background: green; 
}

如果你的問題是，你有這樣的內容如下浮動元素，不希望他們來填補比你可以申請一個寬度和oveflow較短的左側欄創建的空空間：汽車到也是容器。

另外，如果您的寬度％s加起來爲100，並且您也有邊框或填充，則佈局將無法按預期工作。您需要從這些內部div中移除填充，並且可以應用邊框，這些邊框不會佔用DOM中帶有陰影的空間。

來源

2013-01-25 13:22:42 DMTintner

twitter bootstrap：2列容器，一邊可變高度，另一邊100％

回答

相關問題