Twitter Bootstrap Css根据父行流体修复孩子的高度

Posted 2023-03-06

【中文标题】Twitter Bootstrap Css根据父行流体修复孩子的高度

【英文标题】：Twitter Bootstrap Css fix height of a child according to parent row-fluid

【发布时间】：2013-01-27 15:32:33

【问题描述】：

有没有更好的方法将孩子的身高固定为主要的父母身高？ 我试过了，但它对我不起作用：

.child 
    background: none repeat scroll 0 0 #5B6567;
    border-radius: 5px 0 0 0;
    display: inline-block;
    float: left;
    line-height: 30px;
    padding-top: 6px;
    position: relative !important;
    text-align: center;
    width: 12%;
    height:100%


<div class="row-fluid">
    <div class="child">
        child
    </div>
</div>

jsfiddle http://jsfiddle.net/WTmt6/1/ 检查我想要灰色左 div 修复红色一个大 .media div 的高度 ps：我不能使用固定/像素尺寸我只在我的布局上使用百分比/%

【问题讨论】：

这怎么不适合你？我将您的代码复制到 jsfiddle 中，它可以工作。

这行得通，孩子和父母一样高。我错过了什么吗？ jsfiddle.net/qRPYt

对不起，我更新了问题，我在 twitter bootstrap 上现在检查一下

不要一直改变你的问题和代码显示，你不会得到任何帮助。

@Caelea 你是什么意思？我需要留下一个错误的代码还是我需要输入我正在使用的正确代码？

【参考方案1】：

我仍然不确定我是否理解问题... 首先，删除child 上的填充，因为它会导致height:100% 出现问题。您应该在内部 div 中添加填充：

.inner 
    padding:6px;


<div class="child">
    <div class="inner">child</div>
</div>

高度 100% 工作正常。下面是 3 个孩子（其中两个是相等的）的示例，它们漂浮在一个浮动的父代中没有问题：http://jsfiddle.net/qRPYt/7/

如果您仍然遇到问题，请发布 row-fluid 的 CSS 或者更好的 jsfiddle。

【讨论】：

我尝试使用内部 div，但它无论如何都不起作用真的无法理解发生了什么：/

请创建一个jsfiddle：jsfiddle.net（粘贴相关代码，点击“保存”并发布链接）

检查我想让灰色左 div 适合 .media 的高度（红色大一个 div）jsfiddle.net/WTmt6

如果你想让 div 看起来像表格，使用表格会容易得多。一张 3 列 1 行的表格将解决您的问题。

与 DIV 的斗争 then xD 在任何地方都使用表格不是一个好主意，但是当您需要表格时，您不必使用 div 来“酷”。