1

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

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

4

3 回答 3

3

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

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

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

JSFiddle 演示。

于 2013-07-29T13:11:37.510 回答
0

你想要这样的东西吗：JSFiddle

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

于 2013-07-29T13:13:17.807 回答
0

您可能会考虑遍历子元素并对它们的 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();
        }))
    });
于 2013-07-29T13:22:32.133 回答