使englobing / parent div高达内部div [英] Making englobing/parent div as high as inner divs

问题描述

作为创建典型的左，中，右列布局的一部分，我需要将不同高度的一些内部 div 包装到一个englobing / parent div中。我需要确保全局/父 div 高度最高的内部 div ，这取决于文本它包含。 min-height 属性不会剪切。

As part of creating a typical left, mid, right column layout, I need to wrap some inner divs of various height into an englobing/parent div. I need to make sure the global/parent div is as high as the highest inner div, which depends of the text it contains. The min-height property won't cut it.

我应该如何处理？我应该使用表格和单元格，而不是 div s？

How should I proceed? Should I use tables and cells instead of divs?

我包括 JSFiddle 来描述问题。

推荐答案

我想你想实现这样的： http://jsfiddle.net/Cj75q/3/

I guess you want to achieve something like this: http://jsfiddle.net/Cj75q/3/

如果我是对的，你不需要所有这些相对和 / code>位置，所有你需要的是左边的列：

If I'm right you don't need all these relative and absolute positions, all you need is float left of the columns:

#leftCol {
    background-color: #123456;
    width: 23%;
    margin: 0px;
    border: 0px;
    padding: 0px;
    float: left;
}

#midCol {
    background-color: #654321;
    width: 50%;
    margin: 0px 10px 10px 0px;
    border: 0px;
    padding: 10px;
    float: left
}

#rightCol {
    background-color: #567890;
    width: 23%;
    margin: 0px;
    border: 0px;
    padding: 0px;
    float: left;
}

这篇关于使englobing / parent div高达内部div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！