所有元素的高度在Firefox中相同但不是Chrome

时间:2016-04-01 23:31:43

标签: html css twitter-bootstrap flexbox

我希望我的所有盒子都有相同的高度 我使用CSS显示:flex,它适用于第一个块,但不是他的孩子 它适用于Firefox,但不适用于Chrome 我在getbootstrap上找到了row-eq-height类,但它在chrome上并不是更好

my page on chrome

my page on firefox

我有一个div类row-eq-height然后是col-md-4和一个面板 面板高度不想改变

代码:

<div class="row-eq-height">

        <div class="col-md-4">
            <div class="panel panel-default no-padding server-box">
                <!-- Default panel contents -->
                <div class="panel-heading title-box">Regrowth</div>
                <!-- Table -->
                <table class="table server-table">
                    <tbody>
                    <tr>
                        <th>Adresse IP</th>
                        <td>#</td>
                    </tr>
                    <tr>
                        <th>Joueurs en ligne</th>
                        <td class="progress-bar-wrap">
                            <div>
                                <span style="width: 0%;"></span>
                                  <span class="progress-bar-content">0
                                                    /50</span>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <th>Statut</th>
                        <td><img src="#" alt="status"></td>
                    </tr>
                    <tr>
                        <th>Ms/Tps</th>
                        <td class="good-tps">2.8 ms / 20 tps</td>
                    </tr>
                    <tr class="heads-tr">
                        <td class="heads-td">
                            <div class="heads">

                            </div>
                        </td>
                    </tr>
                    </tbody>

                </table>
            </div>
        </div>
        <div class="col-md-4">
            <div class="panel panel-default no-padding server-box">
                <!-- Default panel contents -->
                <div class="panel-heading title-box">InfinityHard</div>
                <!-- Table -->
                <table class="table server-table">
                    <tbody>
                    <tr>
                        <th>Adresse IP</th>
                        <td>#</td>
                    </tr>
                    <tr>
                        <th>Joueurs en ligne</th>
                        <td class="progress-bar-wrap">
                            <div>
                                <span style="width: 6%;"></span>
                                                <span class="progress-bar-content">3
                                                    /50</span>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <th>Statut</th>
                        <td><img src="#" alt="status"></td>
                    </tr>
                    <tr>
                        <th>Ms/Tps</th>
                        <td class="#">7.1 ms / 20 tps</td>
                    </tr>
                    <tr class="heads-tr">
                        <td class="heads-td">
                            <div class="heads">
                                <img src="#" alt="Melkutus" data-toggle="tooltip"
                                     data-trigger="hover" data-placement="bottom" title="Melkutus">
                                <img src="#"
                                     data-toggle="tooltip" data-trigger="hover" data-placement="bottom"
                                     title="FortunateTrollz">
                                <img src="#" alt="Asseo" data-toggle="tooltip"
                                     data-trigger="hover" data-placement="bottom" title="Asseo">

                            </div>
                        </td>
                    </tr>
                    </tbody>

                </table>
            </div>
        </div>
    </div>

和css

    .row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
}
.panel-container .server-box {
    height: 100%;
}
感谢那些会理解并回答我的人!

0 个答案:

没有答案