如果給出div和一系列float: left屬性的嵌套div，如何使序列中最後一個div的右邊緣「粘」到父級的右邊緣div，只要父div的右邊緣移動，並且即使最後一個div的內容超出了可用空間，兩個邊一起移動，也是如此？將浮動div對齊到父div

 
+----------------------------------------+ 
| parent div        | 
| +-------------+ +---------------------+| 
| |    | |      || 
| | div 1  | | div 2    >>||<< the right edge of div 2 
| | float: left | | float: left   || aligns with the right edge 
| |    | |      || of the parent div 
| +-------------+ +---------------------+| 
+----------------------------------------+

編輯：我應該提到的條件是最後一個之前的div都不允許有固定的寬度，但最後一個div的寬度應當取決於其內容和右邊緣的位置的父分部。另外，最後一個div需要左移。

來源

2012-02-21 Desmond Hume

http://stackoverflow.com/questions/623325/how-to-get-a-floating-div-to-fill-available-space-within-its-parent-div的可能的複製？ – 2012-02-21 11:27:29

如果您必須浮動：留下最後一個div，那麼只有正確對齊它的方法是設置兩個元素的寬度否則它不可能或者您必須在第二個div上刪除float：left。

http://jsfiddle.net/K9a8p/

來源

2012-02-21 14:02:04

-2

通過這個循環，讓您的最好的辦法是給最後一個div一類 - lastChild並添加border-right:0的那類..還有，這裏的另一個速戰速決

你的CSS

.container{ 
border:2px solid black; 
height:40px; 
width:auto; 
overflow:hidden; 
} 
.ele{ 
float:left; 
height:20px; 
width:30%; 
overflow:hidden; 
border:3px solid red; 
} 
.container div:last-child{ 
border-right:0; 
}

你的HTML

<div class="container"> 
<div class="ele" > </div> 
<div class="ele" > </div> 
<div class="ele" > </div> 
</div>

這裏有一個小提琴解釋相同..

DEMO

你應該注意到了瀏覽器的兼容性：最後一個孩子 -

這裏的另一個答案 - Using the last-child selector

Internet Explorer 6中有任何不支持。

IE7和IE8都支持：first-child和not：last-child，但必須指定。

兩者都適用於所有版本的Firefox。我已經測試了Chrome for Windows，Opera 9.64以及Windows 3和Safari 4，並且它們都在這些版本中運行。

來源

2012-02-21 11:25:10

可憐的答案http://jsfiddle.net/QXDBW/ – 2012-02-21 11:34:19

@TimBjames用小提琴更新了答案.. :) – 2012-02-21 11:46:49

是不是所有'border-right：0'確實隱藏了div的右邊框如果div的邊界是按照它的風格繪製的，那麼這個問題與這個問題幾乎沒有任何關係？ – 2012-02-21 12:01:13

將浮動div對齊到父div

回答

DEMO

相關問題