在表格单元格中使用CSS使内部div高度为100％
pgee70
我有一个表格/表格行/表格单元格布局，并且我希望内部div高度对齐。我看到了这篇文章：高度：<div>中<div>内的显示为：table-cell的100％询问了相同的问题，但是我的代码似乎无法获得相同的结果。
我有一个JS解决方案，但确实希望不需要它。
我的问题是：如何仅使用CSS使nkda框与其他两个框的高度相同？
这是一个JS小提琴http://jsfiddle.net/a1opo1kd/
html
<div class="forum-tag-summaries">
<dl class="tags-rows">
<div class="row tags-row">
<div id="tag-wrapper-2" class="tag-wrapper" data-row="0" data-ftg_id="2" data-i="0">
<div class="alert alert-info" id="ui-id-1">
<dt>
<div class="fl" title="Created 1 year ago by Mr Peter GEE">
clinical
</div>
<button class="btn btn-xs btn-edit ml-5">
<span class="fa fa-pencil">
</span>
</button>
<div class="fr text-muted">
x 2
</div>
</dt>
<br>
<dd>
<div class="text-muted view" title="">
Clinical questions relating to medication reviews.
</div>
<div class="edit hidden text-muted">
<textarea data-id="2" name="ftg_description" class="mw maxlength-enabled ajax" maxlength="1000" placeholder="Enter a description for this tag…">
Clinical questions relating to medication reviews.
</textarea>
</div>
</dd>
</div>
</div>
<div id="tag-wrapper-6" class="tag-wrapper active" data-row="0" data-ftg_id="6" data-i="1">
<div class="alert alert-info" id="ui-id-2">
<dt>
<div class="fl" title="Created 2 days ago by Mr Peter GEE">
nkda
</div>
<button class="btn btn-xs btn-edit ml-5">
<span class="fa fa-pencil">
</span>
</button>
<div class="fr text-muted">
x 1
</div>
</dt>
<br>
<dd>
<div class="text-muted view" title="">
no known drug allergies
</div>
<div class="edit hidden text-muted">
<textarea data-id="6" name="ftg_description" class="mw maxlength-enabled ajax" maxlength="1000" placeholder="Enter a description for this tag…">
no known drug allergies
</textarea>
</div>
</dd>
</div>
</div>
<div id="tag-wrapper-3" class="tag-wrapper" data-row="0" data-ftg_id="3" data-i="2">
<div class="alert alert-warning" id="ui-id-3">
<dt>
<div class="fl" title="Created 2 days ago by Mr user 1">
RMMR
</div>
<button class="btn btn-xs btn-edit ml-5">
<span class="fa fa-pencil">
</span>
</button>
<div class="fr text-muted">
x 1
</div>
</dt>
<br>
<dd>
<div class="text-muted view" title="">
<span class="text-danger">
This tag does not have a description, please enter one!
</span>
</div>
<div class="edit hidden text-muted">
<textarea data-id="3" name="ftg_description" class="mw maxlength-enabled ajax" maxlength="1000" placeholder="Enter a description for this tag…">
</textarea>
</div>
</dd>
</div>
</div>
</div>
<div class="row tags-row">
<div id="tag-wrapper-4" class="tag-wrapper" data-row="1" data-ftg_id="4" data-i="0">
<div class="alert alert-warning" id="ui-id-4">
<dt>
<div class="fl" title="Created 2 days ago by Mr user 1">
hypertension
</div>
<button class="btn btn-xs btn-edit ml-5">
<span class="fa fa-pencil">
</span>
</button>
<div class="fr text-muted">
x 1
</div>
</dt>
<br>
<dd>
<div class="text-muted view" title="">
<span class="text-danger">
This tag does not have a description, please enter one!
</span>
</div>
<div class="edit hidden text-muted">
<textarea data-id="4" name="ftg_description" class="mw maxlength-enabled ajax" maxlength="1000" placeholder="Enter a description for this tag…">
</textarea>
</div>
</dd>
</div>
</div>
<div id="tag-wrapper-5" class="tag-wrapper" data-row="1" data-ftg_id="5" data-i="1">
<div class="alert alert-warning" id="ui-id-5">
<dt>
<div class="fl" title="Created 2 days ago by Mr user 1">
poly pharmacy
</div>
<button class="btn btn-xs btn-edit ml-5">
<span class="fa fa-pencil">
</span>
</button>
<div class="fr text-muted">
x 1
</div>
</dt>
<br>
<dd>
<div class="text-muted view" title="">
<span class="text-danger">
This tag does not have a description, please enter one!
</span>
</div>
<div class="edit hidden text-muted">
<textarea data-id="5" name="ftg_description" class="mw maxlength-enabled ajax" maxlength="1000" placeholder="Enter a description for this tag…">
</textarea>
</div>
</dd>
</div>
</div>
<div id="tag-wrapper-7" class="tag-wrapper" data-row="1" data-ftg_id="7" data-i="2">
<div class="alert alert-danger" id="ui-id-6">
<dt>
<div class="fl" title="Created 23 hours ago by user 1">
test
</div>
<button class="btn btn-xs btn-edit ml-5">
<span class="fa fa-pencil">
</span>
</button>
<div class="fr text-muted">
x 0
</div>
</dt>
<br>
<dd>
<div class="text-muted view" title="">
<span class="text-danger">
This tag does not have a description, please enter one!
</span>
</div>
<div class="edit hidden text-muted">
<textarea data-id="7" name="ftg_description" class="mw maxlength-enabled ajax" maxlength="1000" placeholder="Enter a description for this tag…">
</textarea>
</div>
</dd>
</div>
</div>
</div>
</dl>
</div>
的CSS
.btn-edit{background-color:transparent;}
dl.tags-rows {
display: table;
height: auto;
}
dl.tags-rows .tags-row {display: table-row;}
dl.tags-rows .tags-row .tag-wrapper {
display: table-cell;
height: 100%;
width: 33%;
min-width: 33%;
padding: 5px;}
.ml-5{margin-left:5px;}
.fl{float:left;}
.fr{float:right;}
屏幕截图示例 
阿尔贝尔
非常简单。在您的情况下，这就是您所需要的：
dl.tags-rows {
display: table;
height: 1px; /* IE fix, any small height */
}
.alert {
display: inline-table;
height: 100%;
width: 100%;
vertical-align: top;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
编辑于
相关文章
TOP 榜单
- 1
计算数据帧R中的字符串频率
- 2
Android Studio Kotlin：提取为常量
- 3
Excel 2016图表将增长与4个参数进行比较
- 4
获取并汇总所有关联的数据
- 5
如何使用Redux-Toolkit重置Redux Store
- 6
http：// localhost：3000 /＃！/为什么我在localhost链接中得到“＃！/”。
- 7
将加号/减号添加到jQuery菜单
- 8
算术中的c ++常量类型转换
- 9
TYPO3：将 Formhandler 添加到新闻扩展
- 10
TreeMap中的自定义排序
- 11
如何开始为Ubuntu开发
- 12
在 Python 2.7 中。如何从文件中读取特定文本并分配给变量
- 13
无法使用 envoy 访问 .ssh/config
- 14
在Ubuntu和Windows中，触摸板有时会滞后。硬件问题？
- 15
遍历元素数组以每X秒在浏览器上显示
- 16
在Jenkins服务器中使用Selenium和Ruby进行的黄瓜测试失败，但在本地计算机中通过
- 17
警告消息：在matrix（unlist（drop.item），ncol = 10，byrow = TRUE）中：数据长度[16]不是列数的倍数[10]>？
- 18
未捕获的SyntaxError：带有Ajax帖子的意外令牌u
- 19
如何使用tweepy流式传输来自指定用户的推文（仅在该用户发布推文时流式传输）
- 20
尝试在Dell XPS13 9360上安装Windows 7时出错
- 21
如果从DB接收到的值为空，则JMeter JDBC调用将返回该值作为参数名称
我来说两句