Question

我试图做柔性网格，但我想让任何列具有相同的高度。

它适用于IE和Firefox，但在Chrome和Opera中没有。

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>min-height test</title>
    <style type="text/css"> 
    html, body { padding: 0px; margin: 0px; height: 100%; text-align: center; }
    #test{ display: flex; border: 1px solid blue; list-style: none; padding: 0; margin: 0; }
    #test li{display: inline-block; height: auto; border: 1px solid orange; font-size: 30px; padding: 50px;}
    .blue{ background: blue; height: 100%; }
    .red{background: red;  height: 100%;}
    .green{background: green;  height: 100%;}
    </style>
</head>
<body>
    <ul id="test">
        <li><div class="blue">test<br/>test</div></li>
        <li><div class="red">test<br/><br/><br/>test</div></li>
        <li><div class="green">test<br/><br/>test</div> </li>   
    </ul>
</body>
</html>

没有JS可以吗？任何人都可以告诉我问题在哪里

Answer 1

将列表项设置为

display：flex;

#test li{
    display: flex;
    height: auto; 
    border: 1px solid orange; 
    font-size: 30px; 
    padding: 50px;
}

从.blue，红色和绿色选择器中删除高度

.blue { 
    background: blue;        
}

.red {
    background: red;
}

.green {
    background: green;  
}

此处示例：

http://jsfiddle.net/m4e3f/

显示内部的弹性和自动高度（100％）

1 个答案: