Question

我正在尝试设置一些css以拥有3列。

中间和右侧列可以包含文本。我现在有它，以便中间列将包装文本，所有其他列将根据该列调整大小。我需要正确的列以相同的方式影响其他列。我不是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/

Answer 1

使用display: table-cell;非常容易。

Answer 2

我不相信你可以用直接的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 })
});

Answer 3

使多个列具有相同高度的最简单方法是使用虚拟列。 http://line25.com/articles/create-sidebars-of-equal-height-with-faux-columns

Answer 4

您可以更多地使用display：flexbox http://css-tricks.com/snippets/css/a-guide-to-flexbox/

CSS列保持相同的高度

4 个答案: