Блог

Главная - Вопросы по программированию - как сохранить правый край одного div таким же, как правый край другого div

как сохранить правый край одного div таким же, как правый край другого div

#javascript #html #css

#javascript #HTML #css

Вопрос:

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



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

приведенный выше пример моей текущей страницы.

  1. div 1-4 — это группы изображений. Я использую float left, чтобы они помещались в одну строку, если страница сайта достаточно широкая; если размера страницы недостаточно для размещения 4 разделов, то div4 перейдет на вторую строку.

  2. выпадающий список div использует float: right , поэтому он всегда сохраняется на правом краю страницы.

здесь мой вопрос :

как я могу сохранить правый край выпадающего списка равным правому краю первой строки div для последнего div ==> это означает: край A = край B

Комментарии:

1. Отклонено, потому что форматирование вопроса ужасно.

Ответ №1:

Это должно дать вам место для начала:http://jsfiddle.net/ryanrolds/kaaNF /

Проверил это в Chrome, FF4 и IE8.

Комментарии:

1. Это решение не будет работать, если его изображения имеют фиксированную, но различную ширину черно-белых изображений. Хотя @Prophet не упомянул об этом, поскольку ширина страницы будет сильно различаться, по крайней мере, я сомневаюсь, что изображения будут выстраиваться правильно.

Ответ №2:

Это зависит от того, насколько динамичны изображение и ширина области просмотра. Нет способа заставить их автоматически выравниваться, пока вы привязываете влево (float: left). Вам либо нужно переключиться на float: right, либо убедиться, что изображения имеют фиксированную ширину, и установить для контейнера фиксированную ширину, чтобы вы могли привязать выпадающий список справа от контейнера.

Или, если вы действительно хотите, чтобы все было динамичным и изменяемым, вам придется настраивать ширину с помощью JavaScript после загрузки всех изображений и пересчитывать после каждого изменения размера окна просмотра.