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

我有无限数量的框。这些盒子内外必须有一个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，父节点获得剩下的两个盒子的宽度，一切都很好。如果显示第三个孩子，父母的顶部边框只需要它可以获得的所有宽度。

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

来源

2013-07-29 xong

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

首先从#inner-wrapper删除border-top和border-left，然后更改.box造型使用方法：

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

JSFiddle demo。

来源

2013-07-29 13:11:37

这很容易，但不幸的是，这个解决方案有一个小故障：是否有可能使盒子居中？ – xong

你想是这样的：JSFiddle

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

来源

2013-07-29 13:13:17

你可能会考虑通过子元素循环，并使其偏移量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-29 13:22:32

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

回答

相关问题