小编bei*_*wel的帖子
表格单元格布局和空div的奇怪行为
我只是偶然发现了一个使用table-cellcss属性的布局非常奇怪的行为.我在当前的FF,Safari和Chrome中尝试了以下代码.到处都是一样的行为.
我的问题是,是否有人知道为什么会这样.它是浏览器错误还是已定义的行为？我发现这个问题,这对如何解决问题的提示,但我宁愿想知道这是为什么首先发生.我想其他人也想知道.
问题:如果我在 第二个表格中注释,一切都很好.然而,如果div保持为空,则另外两个单元格的内容具有类似"偏移顶部"的内容.该偏移具有与中间单元的高度相同的尺寸.即外部细胞的内容向底部移动.我添加了两个截图div_not_empty.png和div_empty.png.
谢谢
更新
我忘记了截图.他们来了:
码:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Strange behavior with table-cell formatting</title>
<style type="text/css" media="screen">
#table {
display: table;
background: #efefef;
}
div.cell {
display: table-cell;
}
#c1 div.content {
width: 200px;
}
#c2 {
border-left: 2px solid #ccc;
}
#c2 div.content {
height: 150px;
width: 150px;
background: #aaa;
vertical-align: bottom;
}
#c3 {
width: 200px;
border-left: 2px …3
推荐指数
推荐指数
1
解决办法
解决办法
2038
查看次数
查看次数