Question

我花了一整夜的时间试图理解这一点。

当我在我的网页中设置div的内容样式时，它会干扰既不是父div也不是子div的其他div的内容。不相关的div的内容不应该是独立的？尽管如此，我试图理解并解决我的特殊问题，但没有任何运气。不仅仅是一个解决方案，我需要一个解释。

和代码：

<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将菜单对齐到右边，使用内联块将div与内容匹配，并且如果可能的话，继续使用表格单元格，无需定位。

事先谢谢，何

Answer 1

是否有使用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%;
}

Answer 2

vertical-align或<td>显示的元素的Defaut table-cell如果您希望它们的行为与常规流内容相同，则需要重置为顶部：

#content {
    display: table;
}

#columnleft {

    display: table-cell;  
    vertical-align:top;
}
#columnleft {
    background-color: #FF0000;
}

#columncenter {
    background-color: #FF00FF;
}

<强> DEMO

具有float或inline-block元素的表格单元会弄乱其他表格单元格的内容

2 个答案: