父元素的寬度取決於浮動子元素

我有無限數量的框。這些盒子內外必須有一個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

父元素的寬度取決於浮動子元素

回答

相關問題