2

我有这个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 适合其内容的大小。

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

4

3 回答 3

3

好吧，根据您的实际最终应用程序，使用float可以工作（请参阅小提琴），尽管旧版本的 IE 可能会窒息它：

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;
}
于 2012-05-22T22:21:00.500 回答
2

老派修复：

<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 />

在每个包含 inline-block 类的 div 之后。

于 2012-05-22T22:25:41.247 回答
1

你不是真的在这里问一个问题，你帖子的两条底线有点难以理解，但你确定你不想要display: block吗？

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

于 2012-05-22T22:08:09.140 回答