具有浮动或内联块元素的单元格与其他表格单元格的内容混乱
我花了一整晚的时间试图理解这一点。
当我在网页中设置div的样式时，它会干扰其他div的内容，这些div既不是父div，也不是子div。不相关的div的内容不应该是独立的？尽管如此，我试图理解和解决我的特定问题，但没有任何运气。不仅仅是一个解决方案，我还需要一个解释。
这里是小提琴：http://jsfiddle.net/gQ3U2/
和代码：
<html>
<head>
<style>
#content {
display: table;
}
#columnleft {
background-color: #FF0000;
display: table-cell;
}
#columncenter {
background-color: #FF00FF;
display: table-cell;
}
.menu {
float: right;
}
</style>
</head>
<body>
<div id="content">
<div id="columnleft">
<div class="menu">
this menu
<br/>
takes
<br/>
some space
<br/>
</div>
</div>
<div id="columncenter">
this should be on top
<br/>
but only appears here if:
<br/>
a) menu has display: inline-block or
<br/>
b) menu has float: right
</div>
</div>
</body>
</html>a)我认为这是表格单元格布局的问题，因为在浮动布局中不会发生这种情况。这是display:table的限制吗？
b)在浮动的情况下:对，我发现一个
在菜单使问题消失后。为什么？
c)清除:在菜单不起作用后都清除
d)我对没人理解为什么的黑客不感兴趣，也不想“手动”纠正菜单在其他div中所做的更改，也不想选择另一个没有这个问题的根目录。我希望能够使用float将菜单向右对齐，使用inline-block使div适合内容，并继续使用表格单元格，如果可能的话，不需要定位。
先谢谢你，何塞
回答 2
Stack Overflow用户
发布于 2014-06-20 16:11:36
是否有使用display: table的具体原因
对于大多数布局选项，实际上并不需要使用display:table。一个好的解决方案通常就是使用浮点数。
举个例子：
Have a fiddle!
CSS
html, body, #content {
height: 100%;
}
#columnleft {
background-color: #FF0000;
float: left;
height: 100%;
}
#columncenter {
background-color: #FF00FF;
height: 100%;
}Stack Overflow用户
发布于 2014-06-20 16:12:42
如果您希望<td>或table-cell显示的元素的行为与常规流内容一样，则需要将它们的默认vertical-align重置为顶部：
#content {
display: table;
}
#columnleft {
display: table-cell;
vertical-align:top;
}
#columnleft {
background-color: #FF0000;
}
#columncenter {
background-color: #FF00FF;
}https://stackoverflow.com/questions/24322509
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号