Question

这个小提琴：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

Answer 2

将它们变成表格单元格

http://jsfiddle.net/e3Ggh/3/

#texte {
    display: table;
    width: 100%;
    border-spacing:10px;
}

#texte>div{
   width:30%;
   display:table-cell;
   border: 1px solid black;
   vertical-align: top;
}

这将让您了解它的工作原理，您可以根据需要进一步设计

Answer 3

这是使用display：flex的解决方案（JSFiddle：http://jsfiddle.net/H3S4k/

CSS

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

另请参阅：http://caniuse.com/#search=flex

使用相同大小的div边框而不使用明确的高度

3 个答案: