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列保持相同的高度

回答

相关问题