css - 在不使用显式高度的情况下制作相同大小的 div 边框

Question

这把 fiddle :http://jsfiddle.net/e3Ggh/显示我的问题是什么:我需要让我的 div 的边框大小相同，即使它们的内容不同。但是，我需要在不使用明确尺寸的情况下执行此操作(div 或其父项都不应具有明确尺寸)。
HTML:

<div id="texte">
            <div>
                <p>"Lorem ipsum dolor sit amet [...]"</p>
            </div>
            <div>
                <p>At vero eos et accusamus[...]</p>
        </div>
    </div>

CSS:

        #texte{
            width:100%;
        }
        #texte>div{
            width:30%;
            display:inline-block;
            border: 1px solid black;
            vertical-align: top;
        }
        #texte>div>p{
            width:90%;
            margin: auto;
            display: block;
        }

Answer 1

您可以在主容器上使用 display: table 并在列上使用 display: table-cell 来实现您想要的效果:

#texte{
        width:100%;
        display: table;
    }
    #texte>div{
        width:30%;
        display:table-cell;
        border: 1px solid black;
        vertical-align: top;
    }
    #texte>div>p{
        width:90%;
        margin: auto;
        display: block;
    }

jsFiddle:http://jsfiddle.net/bjuice/GQmfk/1

兼容性:http://caniuse.com/css-table