Question

这个简单的html结构中存在一个奇怪的问题。这是html代码

<body>
    <div class='DatePicker' style="display: inline-block">
        <div id="dayDiv" class='DayDiv BorderMe'>
            <div id='upArrowDivs' class="BorderMe" style='display: inline-block; height:10%;width:100%;'>
                <div class='UpArrowDiv BorderMe'>

                </div>
                <div class='UpArrowDiv BorderMe'>

                </div>
            </div>
        </div>
    </div>
</body>

这里两个最里面的div显示在其父div之外，其id为“upArrowDivs”。以下是JsFiddle link，您可以在其中查看StyleSheet中的最新情况。

Answer 1

将此规则添加到.UpArrowDiv

vertical-align: top;

请参阅the fiddle

Answer 2

在您的css文件中添加此内容

#upArrowDivs{overflow:hidden;}

Answer 3

这是Solution。

加入CSS：

#upArrowDivs{overflow:auto;}

您需要为此添加溢出。

希望这有帮助。

Answer 4

以下是选项

1）增加“upArrowDivs”的高度

2）为“upArrowDivs”设置Padding = 0，为最里面的div设置margin = 0

Divs显示在容器div之外

4 个答案: