CSS列保持相同的高度

中間和右邊的列可以有文字。我目前擁有它，所以中間列將包裝文本，所有其他列將根據該列調整大小。我需要右列以相同的方式影響其他列。我不是CSS專家，主要使用C＃編寫代碼。

我試過其他解決方案，這是最接近我已經得到我的願望。有什麼想法嗎？

到目前爲止，CSS：

#outer 
{ 
    width: 100%; 
    margin: auto; 
    padding:0; 
} 

#leftcolumn 
{ 
position: absolute; 
height: 100%; 
width: 5px; 
-webkit-border-radius: 0px;  
margin: 0 ; 
background-color: Yellow; 
z-index:10;  
left:0px; 
top:0; 
} 

#rightcolumn 
{ 
position: absolute; 
height: 100%; 
width: 75px; 
-webkit-border-radius: 0px;  
margin: 0 ; 
background-color: green; 
right:0px; 
top:0; 
} 

#middlecolumn 
{ 
-webkit-border-radius: 0px;  
margin-left:5px; 
margin-right:75px; 
background-color: #62A9FF; 
left:0px; 
top:0px; 
} 

#inner 
{ 
width:100%; 
margin:0 auto;  
position: relative; 
-webkit-transform: rotate(0deg); 
-webkit-transform-origin:50% 50%; 
}

http://jsfiddle.net/6eshT/15/

來源

2013-11-23 user892381

使用display: table-cell;很容易。

來源

2013-11-23 08:53:07 enumag

嘗試了表格單元方法並因失敗而需要支持ie8 + – user892381

這實際上起作用了。它最初並沒有爲我工作，因爲我沒有所以它在IE8中沒有正確渲染。 Alexandr Skachkov，感謝您發佈jsfiddle，這非常有幫助。 jsfiddle.net/kLMtb/show。 – user892381

我不相信你可以用直CSS做到這一點，但你可以使用jQuery來實現這個漂亮容易。

這裏是一個小提琴： http://jsfiddle.net/6eshT/8/

基本上，您可以設置所有列具有相同的類名。至少有一個共同的類，即class="col somethingElse"「somethingElse」可以是特定於每個列的樣式的類。

jQuery的是：

$('document').ready(function(){ 
    var max = -1; 
    $(".col").each(function() { 
     var h = $(this).height(); 
     max = h > max ? h : max; 
    }); 
    $(".col").css({ 'height' : max }) 
});

來源

2013-11-23 03:58:01 Jacques

這是一個很好的解決方案。但是，我的環境有限，無法使用jquery。在C＃中使用微軟的HTML編輯器非常多。所以它是一個c＃應用程序中的htmleditor。我得到它與2列工作..這只是第三個把我扔掉.. – user892381

其實，只有中心列是最大的，這是由於您的位置絕對使用，你只有的作品。如果您在盒子外面思考一下，可以鏈接到外部jquery庫（）並簡單地把jquery放在''標籤之間的回答下面。它應該像一個魅力工作;） – Jacques

夫婦的事情超出了我的控制禁止我這樣做。此外，我試圖使conenteditable，它不會調整內容時添加的高度。http://jsfiddle.net/6eshT/14/ – user892381

，最簡單的方法，使多列所有相同的高度與人造列。 http://line25.com/articles/create-sidebars-of-equal-height-with-faux-columns

來源

2013-11-23 08:39:29 David

您可以使用顯示：Flexbox的更多關於這個 http://css-tricks.com/snippets/css/a-guide-to-flexbox/

來源

2013-11-23 16:59:06

我喜歡這個，不幸的是我需要與ie8 + – user892381

兼容的東西你可以在之前使用display：table，table-cell作爲mntion。請檢查以下問題（http://stackoverflow.com/questions/19202019/css-3-column-liquid-layout-dynamic-same-height-column?rq=1）以及來自IE8 http：//回答工作的示例jsfiddle.net/kLMtb/show/。 –

Alexandr Skachkov，謝謝。在調查我的代碼後，我發現它並沒有在ie8中正確渲染。我不得不添加元標記。之後它完美運作。 – user892381

CSS列保持相同的高度

回答

相關問題