Question

我有这个HTML：

<div id='calendarControlPane'>          
    <div id='calendarControl'>

        <div style="border-style:solid; display:inline-block;">
            <div style="width:14;height:15;">
            </div>
        </div>

        <div style="border-style:solid; display:inline-block;">
            <div style="width:14;height:15;">
            </div>
        </div>

        <div style="border-style:solid; display:inline-block;">
            <div style="width:14;height:15;">
            </div>
        </div>

    </div>      
</div>

我在容器div上使用“display：inline-block”，因为我希望这些div符合其内容的大小。

我遇到的问题是它们彼此相邻，需要在彼此之下绘制。

Answer 1

嗯，根据您的实际最终申请，使用float可以有效（see fiddle），older versions of IE can choke on it：

<强> HTML

<div id="calendarControlPane">          
   <div id="calendarControl">
    <div>
        <div></div>
    </div>
    <div>
        <div></div>
    </div>
    <div>
        <div></div>
    </div>
   </div>
</div>

<强> CSS

#calendarControl > div {
    float: left;
    clear: left;
    border: 1px solid black;
}

#calendarControl > div > div {
    width: 14px;
    height: 15px;
}

Answer 2

Oldschool修复：

<div id='calendarControlPane'">          
    <div id='calendarControl'">
        <div style="border-style:solid; display:inline-block;">
            <div style="width:14;height:15;"></div>
        </div><br />
        <div style="border-style:solid; display:inline-block;">
            <div style="width:14;height:15;"></div>
        </div><br />
        <div style="border-style:solid; display:inline-block;">
            <div style="width:14;height:15;"></div>
        </div>


    </div>

</div>

只需添加

即可

<br />

在包含内联块类的每个div之后。

Answer 3

你这里并没有真正提出问题，你的帖子的两个底线有点难以理解，但你确定不想要display: block吗？

编辑：正如drublic所说，这是div的默认显示值，所以你根本不需要那种风格。

使用display：inline-block属性将下面划分为另一个

3 个答案: