Question

我正在尝试为我的项目创建一个主题，但是在将div放在另一个div中时我遇到了一些问题。

下面是代码：

<html>
<head>
    <style>
        .mainDIV
        {
            width:100%;
            height:100%;
            background-color:cyan;
        }
        .header
        {
            width:100%;
            height:10%;
            background-color:yellow;
        }
        .menu
        {
            width:10%;
            height:90%;
            display:inline-block;
            background-color:black;
        }
        .content
        {
            width:80%;
            height:90%;
            background-color:blue;
            display:inline-block;
        }
        .menuItem   
        {
            width:100%;
            height:10%;
            background-color:white;
            display:inline-block;
        }
    </style>
</head>
<body>
    <div class="mainDIV">       
        <div class="header">        
        </div>
        <div >      
            <div class="menu">
                <div class="menuItem">
                    I Want display content inside a DIV
                </div>
            </div>
            <div class="content"></div>
        </div>
    </div>
</body>
</html>

如何定位multile div。我正在使用display：inline-block css property。

Answer 1

您的div未正确对齐的原因是因为在后代节点上设置block显示属性时默认值为inline-block。这应该在整个结构中保持一致。下一个问题是内联块的默认对齐方式是＆＃34; baseline＆＃34;。

您有两种选择：

1）添加： float:left;和.mainDiv中的.menu，float:right中的.content。

2）在未设置的任何地方添加display:inline-block;，并在包含菜单和内容的div上设置vertical-align属性。

使用display：inline-block css属性将div定位在另一个div中

1 个答案: