html - bootstrap 和 wordpress - 3 列相同的高度

Question

我使用 bootstrap 为我的 wordpress 网站设计了一些样式。 我有一个包含容器 div、一行和 3 列的代码，当每一列从 wordpress(或与此相关的数据库)获取数据时，每列的高度就是其内容的高度。

我想要的是基于最高列的第 3 列具有相同的高度。 我尝试添加 display: table;到容器，显示:表行；到行，并显示:table-cell；到每一列，但它仍然不起作用。

我的代码:

<div class="container-fluid" id="page-body">
    <div class="row pull-right">
        <div class="col-sm-7 pull-right page-content-wrapper">
            <div class="page-content">
                <?php echo the_content(); ?>
             </div>
        </div>
        <div class="col-sm-3 pull-right page-products-wrapper">
            <div class="">
                test
            </div>
        </div>  
        <div class="col-sm-2 pull-right side-menu-wrapper">
            test 2
        </div>      
    </div>
</div>

我的 CSS 是:

#page-body{
    display: table;
    width: 100%;
    margin-top: 40px;
    direction: rtl;
    padding-right: 9.5%;
    padding-left: 9.5%;
}

#page-body .row{
    width:100%;
    display: table-row;
}

.page-content-wrapper, .page-products-wrapper, .side-menu-wrapper{
    display: table-cell;
}

.page-content-wrapper{
    border-right: 1px solid #BE1621;
    border-left: 1px solid #BE1621;
    padding-left: 5px !important;
    padding-right: 5px !important;
}

.page-content{
    background: #dadada; /* Old browsers */
    background: -moz-linear-gradient(left,  #dadada 0%, #ffffff 50%, #dadada 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  #dadada 0%,#ffffff 50%,#dadada 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  #dadada 0%,#ffffff 50%,#dadada 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dadada', endColorstr='#dadada',GradientType=1 ); /* IE6-9 */
    padding: 25px 10px 25px 10px;
    font-size: 22px;
}

.page-products-wrapper{
    border-left: 1px solid #BE1621;
    padding-left: 5px !important;
    padding-right: 5px !important;
}

我在这里看不到任何应该使它不起作用的东西，但由于某种原因它不会...... 任何帮助，将不胜感激。

提前致谢， 加比。

Answer 1

这可以通过使用 flexbox 来实现。 首先，删除您添加的表格属性，然后将这一行添加到行类:

.row {
   display: flex;
}

如果您想改用表格，请添加:

.row {
   display: table;
}
[class~="col-"] {
   display: table-cell;
}

我强烈建议您使用 flexbox，但这取决于您所寻求的浏览器支持。