html - 如何将内部div放入外部div

Question

HTML:

<div style="width: 300px; position: absolute; right: 25%; top: 5%; -webkit-box-shadow: 2px 4px 40px 0px rgba(0,0,0,0.75); -moz-box-shadow: 2px 4px 40px 0px rgba(0,0,0,0.75);box-shadow: 2px 4px 40px 0px rgba(0,0,0,0.75);">
    <section class="notif notif-warn">
        <h6 class="notif-title">Warning!</h6>
        <p>This task was forced checked out by another user. Your changes will not be saved Site.Master.</p>
        <div class="notif-controls">
            <a href="#" class="notif-close" id="cBtn">Close</a>
        </div>
    </section>
</div>

JSFIDDLE:http://jsfiddle.net/sikni8/kb2r6d4c/1/

如何更新我的 CSS 以确保内部 DIV 适合具有框阴影的外部 DIV。

Answer 1

您可以将 box-sizing: border-box; 添加到您的 .notif 类或删除 100% 宽度。

问题是，当您向元素添加 100% 宽度 + 填充时，它会导致溢出。