Question

我有一个宽度为80％的根div和一个宽度为100％的子节点，当我向子节点添加边框时会出现一个滚动条。我想这是因为100％宽度+ 1px边框溢出。我可以避免这样的问题吗？如何将子div定义为与父包括边界一样宽？

我需要在IE8上运行

<div style="width:80%;overflow:auto;">
    <div style="float:left;width:100%;border-left:1px solid;">
        <div class="title">Title1</div>
        <div style="width:100%;">
            <div class="title">Title2</div>
            <div class="title">Title3</div>
        </div>
        <div style="clear:both;"></div>
    </div>
    <div>text</div>
    <div>text</div>
</div>

CSS

div.title {
    float: left;
    width:33%;
}

示例：http://jsfiddle.net/FN3mv/

Answer 1

将box-sizing: border-box添加到100%宽度元素。

您还需要-moz-box-sizing: border-box。

Answer 2

您已将宽度指定为100％，添加1px的边框将添加2px + 100％如果你需要边框，你需要另一个父div

<div style="width:50%;overflow:auto;">
    <div style="border:1px solid;">
    <div style="width:100%;">
        <div style="float: left;width:50%;">AAA</div>
        <div style="float: left;width:50%;">BBB</div>
        <div style="clear:both;"></div>
        </div></div>
    <div>A1</div>
    <div>A2</div>
</div>

边界导致DIV溢出

2 个答案: