Html Firefox中所有元素的高度相同,但不包括Chrome
我希望我所有的箱子都一样高 我使用了CSS-display:flex,它对第一个块很好,但对他的孩子不起作用 它在Firefox上运行良好,但在chrome上不起作用 我在getbootstrap上找到了row eq height类,但在chrome上并不更好 我有一个div类行eq高度,然后是一个col-md-4和一个面板 面板高度不希望更改 守则:Html Firefox中所有元素的高度相同,但不包括Chrome,html,css,twitter-bootstrap,flexbox,Html,Css,Twitter Bootstrap,Flexbox,我希望我所有的箱子都一样高 我使用了CSS-display:flex,它对第一个块很好,但对他的孩子不起作用 它在Firefox上运行良好,但在chrome上不起作用 我在getbootstrap上找到了row eq height类,但在chrome上并不更好 我有一个div类行eq高度,然后是一个col-md-4和一个面板 面板高度不希望更改 守则: <div class="row-eq-height"> <div class="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>
感谢那些理解我并回答我的人 添加对齐项:拉伸;到.row eq height类或尝试flex:1;在子项(.row eq height>*)上等待片刻。您在哪里使用.row eq高度等级?我在HTMLindeed的任何地方都看不到它,我写错了类,很抱歉我尝试了你的建议,但它仍然不能正常工作,col-md-4 div具有row eq height div height,但col-md-4 div中面板的高度在.panel容器中完全不变。服务器盒规则仅适用于面板容器中的服务器盒。如果您去掉了祖先连接器,它会工作:
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.panel-container .server-box {
height: 100%;
}