Question

我正在建立一个网站的后端，我得到一个奇怪的显示行为table / cell / row

HTML

<div id="App">
            <div id="AppFrame">
                <div id="AppMenu">
                    <div id="AppMenuContent">test</div>
                    <div id="AppMenuLog">test</div>
                </div>

            </div>
        </div>

的CSS：

 html, body{
                height: 100%;
                margin-left: 0px;
                margin-top: 0px;
                margin-bottom: 0px;

                background-color: #ebebeb;
                font-family:Helvetica;
            }
            #App{
                height: 100%;
                display: table;
                margin-left: 0px;
                margin-top: 0px;
            }
            #AppFrame{
                display: table-row;
                height: 100%;
                margin-top: 0px;
            }
            #AppMenu{
                height: 100%;
                width: 300px;
                margin-top: 0px;
                display: table-cell;               
            }
            #AppMenuContent{
                max-width: 65px;
                height: 100%;
                background-color: red;
            }
            #AppMenuLog{
                margin-left: 65px;
                width: 200px;
                height: 100%;
                background-color: #999999;               
            }
            #AppDisplay{
                display: table-cell;
                height: 100%;
            }

问题是，div“AppMenuLog”不会出现在div“AppMenuContent”旁边！我试图将两个div设置为块，改变宽度和高度，但没有解决这个问题，任何人都可以帮助我吗？

Answer 1

您需要将display: inline-block添加到#AppMenuContent和#AppMenuLog。

这里是JSFiddle。

这比使用float: left更好更容易;看原因here。

Answer 2

如果您想使用table结构，请查看此

DEMO

display:table-cell;需要添加到#AppMenuLog和#AppMenuContent

Answer 3

<强> DEMO

您需要将float:left添加到div #AppMenuContent

#AppMenuContent {
    background-color: #FF0000;
    float: left;
    height: 100%;
    max-width: 65px;
}

Answer 4

下次尝试更难找到答案。在这方面有很多与你相似的问题。您需要使用float:left;

在这里，您可以找到解决方案http://jsfiddle.net/5G9nJ/5/

Div不会彼此相邻

4 个答案:

DEMO