CSS制作两个div与显示表相等的高度

在以下HTML中，div .left和.right的高度不同。没有定义高度，是否有可能使两个div的高度相同？我曾尝试使用display：table，但不起作用。CSS制作两个div与显示表相等的高度

HTML：

<div class="wrap"> 

    <div class="left"> 
     Lorem  
    </div> 

    <div class="right"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    </div> 

</div>

CSS：

.wrap{ 
    overflow:hidden; 
    width:250px; 
    display: table; 
    border-collapse: collapse; 
} 


.left{ 
    width:100px; 
    float:left; 
    display: table-cell; 
    border-bottom:1px solid green;  
} 


.right{ 
    width:150px; 
    float:left; 
    border-bottom:1px solid red; 
    display: table-cell;  
}

的jsfiddle： http://jsfiddle.net/fJbTX/1/

来源

2012-07-20 user1355300

取出float，这需要这些元件，文档的正常流动，并添加另一种包装元素，充当table-row：

table-cell，行为类似于<td> HTML元素

这意味着这需要（虽然我没有验证我的推理）display: table-row父母，因为td需要父母元素tr。

.wrap{ 
    overflow:hidden; 
    width:250px; 
    display: table; 
    border-collapse: collapse; 
} 

.row { 
    display: table-row; 
} 
.left{ 
    width: 50%; 
    display: table-cell; 
    background-color: #0f0; 
} 


.right{ 
    width: 50%; 
    background-color: #f00; 
    display: table-cell;  
}

JS Fiddle demo。

参考文献：

CSS display。

来源

2012-07-20 20:12:03

你不需要带'display：table-row'的div，浏览器会添加它。 http://stackoverflow.com/questions/22179502/is-it-valid-to-use-css-table-cell-with-no-table-row – lefoy 2014-07-06 17:43:25

如果您的样式表中的其他位置正在添加float。你可以添加你的.left和.rigth divs'float：none'属性来取消该浮动的效果。 – Mohsin 2015-11-12 17:13:44

像这样的事情？

http://jsfiddle.net/fJbTX/3/

我拿出float属性

来源

2012-07-20 20:10:45 Huangism

删除浮动固定它给我。有趣的是，我必须重新加载页面才能使更改生效，使用Firebug删除浮动并不会导致“单元格”变成同一高度。 – SeanKendle 2015-02-25 16:56:53

CSS制作两个div与显示表相等的高度

回答

相关问题