DEMO

Question

如果给出了div和一系列具有float: left属性的嵌套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的边缘。此外，最后一个div需要向左浮动。

Answer 1

如果你必须漂浮：离开最后一个div然后只有正确对齐它的方法是设置两个元素的宽度，否则它是不可能的OR你必须删除float：left on second div。

http://jsfiddle.net/K9a8p/

Answer 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

您应该注意以下内容的浏览器兼容性：last-child -

这是另一个答案 - Using the last-child selector

Internet Explorer 6也不支持。

IE7和IE8都支持：first-child而不是：last-child但是必须指定。

两者都适用于所有版本的Firefox。我测试过Chrome for Windows，Opera 9.64和Safari 3和4 for Windows，它们都适用于这些版本。

将浮动div与父div对齐

2 个答案:

DEMO