0

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

3 回答 3

4

您可以在主容器上使用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

于 2013-09-24T19:37:02.540 回答
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;
}

这将使您了解它的工作原理，您可以根据需要进一步设置样式

于 2013-09-24T19:26:02.683 回答
0

这是使用 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

于 2013-09-24T19:37:59.000 回答