Question

我有无限数量的盒子。这些盒子的内外边界应为3px。正如您可以想象的那样，为每个框提供3px边框的简单解决方案会产生宽度为6px的内部边框。

所以我在这些方框周围包裹了一个父div，让父母也浮动了。现在这些方框得到一个底部和一个右边框，父级获得一个顶部和一个左边框。这种方法非常好，除非有这么多盒子的情况，所以它们开始出现在一个新的行中。

<div id="wrapper">
    <div id="inner-wrapper">
        <div id="first" class="box"></div>
        <div id="second" class="box"></div>
        <div id="third" class="box"></div>
    </div>
</div>

#wrapper仅用于模拟小型浏览器窗口并说明问题。

#wrapper {
    width:500px;
    border:1px solid #000;
    padding:20px;
    overflow:hidden;
}

#inner-wrapper {
    float:left;
    border-top:3px solid #00a;
    border-left:3px solid #00a;
}

.box {
    width:198px;
    height:198px;
    border-bottom:3px solid #00a;
    border-right:3px solid #00a;
    float:left;
}

您还可以在http://jsfiddle.net/nTTnd/上看到此代码示例。

父div的顶部边框让我烦恼。如果你隐藏第三个孩子div，父母得到剩下的两个盒子的宽度，一切都很好。如果显示第三个子节点，则父节点的顶部边框将获取它可以获得的所有宽度。

如果有人建议如何解决这个问题，甚至是完全不同的方法，我会非常高兴。 =）

Answer 1

只需使用负边距来修复边框问题。

首先从border-top中删除border-left和#inner-wrapper，然后更改要使用的.box样式：

border:3px solid #00a;
margin-left:-3px;
margin-bottom:-3px;

JSFiddle demo

Answer 2

你想要这样的东西：JSFiddle

我只需在border:3px solid #00a;中添加.box并删除其他边框。

Answer 3

您可以考虑循环遍历子元素并对其offsetWidth（）进行求和。

    $(document).ready(function()
    {
       totalWidth=0;
        $(".box").each(function(){  /*select the child boxes*/
            totalWidth=totalWidth + $(this).offsetWidth();  /* sum their width  */
            totalWidth= totalWidth + 8; /*being lazy here when compensating for padding and margin.*/
        })
        $("#inner-wrapper").width(totalWidth);  /*set the parent wrappers width. */
        $('#wrapper').before($('<button>').text('Toggle 3rd <div>').click(function()
        {
            $('#third').toggle();
        }))
    });

父元素的宽度取决于浮动子元素

3 个答案: