如何保持一个div右边缘与其他div右边缘相同

Question

----------------                                    ----------------------->edge A
|              |                                    |                   |
| logo         |                                    | drop down list    |
|______________|                                    |___________________|
--------------------     --------------------     -------------------- --->edge B
|                  |     |                  |     |                  |  
|                  |     |                  |     |                  |
|                  |     |                  |     |                  |
| div 1            |     | div 2            |     | div 3            |
|                  |     |                  |     |                  |
|                  |     |                  |     |                  |
|__________________|     |__________________|     |__________________|



--------------------
|                  |
|                  |
|                  |
| div 4            |
|                  |
|                  |
|__________________|

以上是我当前的页面样本。

1. div 1-4是图像组。如果站点页面足够宽，我使用float left来保持它们适合一行;如果页面大小不足以容纳4个div，则div4将转到第二行。

2. 下拉列表div使用float：right，因此它始终保持在页面的右边缘。

我的问题是：

如何保持下拉列表的右边缘等于第一个div线的最后一个div的右边缘==＆gt;这意味着：边缘A =边缘B

Answer 1

这应该为您提供从http://jsfiddle.net/ryanrolds/kaaNF/

开始的地方

在Chrome，FF4和IE8中查看。

Answer 2

这取决于图像和视口宽度的动态程度。只要您向左锚定（浮动：左），就无法让它们自动对齐。你需要切换到float：right，或者确保你在图像上有一个固定的宽度，并将容器设置为固定的宽度，这样你就可以将下拉列表固定在容器的右边。

或者，如果您真的希望所有内容都是动态和可变的，则必须在加载所有图像后使用JavaScript调整宽度，并在每次视口大小更改后重新计算。