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

【问题标题】：Parent element's width depending on floating children父元素的宽度取决于浮动子元素
【发布时间】：2013-07-29 21:22:32
【问题描述】：

我有不定数量的盒子。这些框的内部和外部应具有 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，则父级将获得剩余两个框的宽度，一切都很好。如果显示第三个子元素，则父元素的上边框将占据它所能得到的所有宽度。

如果有人对如何解决此问题或什至完全不同的方法提出建议，我将非常高兴。 =)

【问题讨论】：

标签： css

【解决方案1】：

只需使用负边距来解决边框问题。

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

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

JSFiddle demo.

【讨论】：

这很容易，但不幸的是，这个解决方案有一个小故障：是否可以将框居中？

【解决方案2】：

你想要这样的东西吗：JSFiddle

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

【讨论】：

【解决方案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();
        }))
    });

【讨论】：