Jump to content
  • 0

Как изменить порядок следования блоков


alzasr
 Share

Question

Есть два блока, один идет за другим, например

<div id="div1">Контент 1</div><div id="div2">Контент 2</div>

Блок div2 отобразиться под блоком div1. Высоты блоков не известны, вернее они могут быть различны. Есть ли возможность отобразить блок div2 над блоком div1 без использования javascript? Если бы размеры были известны, хотя бы у блока div2, то абсолютное позиционирование и margin-top, но в данном случае не подходит

Link to comment
Share on other sites

11 answers to this question

Recommended Posts

  • 0
Есть два блока, один идет за другим, например

<div id="div1">Контент 1</div><div id="div2">Контент 2</div>

Блок div2 отобразиться под блоком div1. Высоты блоков не известны, вернее они могут быть различны. Есть ли возможность отобразить блок div2 над блоком div1 без использования javascript? Если бы размеры были известны, хотя бы у блока div2, то абсолютное позиционирование и margin-top, но в данном случае не подходит

Диву 1 надо дать флоат и в эту же сторону отрицательный маргин на 100%.

Но прокатит если дивы во всю ширину правильно структурированного родителя, то есть, если "видимая" ширина родителя соответствует отрендеренной браузером.

Ну и колдуйте далее, чтобы последующие элементы тоже не могли попасть под эту же конструкцию, если надо.

Link to comment
Share on other sites

  • 0
Диву 1 надо дать флоат и в эту же сторону отрицательный маргин на 100%.

Но прокатит если дивы во всю ширину правильно структурированного родителя, то есть, если "видимая" ширина родителя соответствует отрендеренной браузером.

Ну и колдуйте далее, чтобы последующие элементы тоже не могли попасть под эту же конструкцию, если надо.

Видимо для этого приема у меня родительский блок неправильно структурирован. Есть левая и правая колонка, которые тоже флоатнуты. В общем, в моем случае, это не помогло

Link to comment
Share on other sites

  • 0
Тогда покажите всю структуру

Структуру показать сложно, верстальщик постарался (((((

Вот ссылка http://www.fitness96.ru/catalog/fitness_clubs/ekaterinburg, на этой странице, ниже перечня фитнес-клубов идет текст. В коде они идут именно в порядке "список клубов" затем "текст", СЕОшники просят, чтобы на этой странице в HTML коде сначала шел текст, а потом список клубов, а отображалось так, как сейчас. Сам придумать не могу, т.к. версткой практически не занимаюсь, и кроме как javascript'ом ничего в голову не идет

Edited by alzasr
Link to comment
Share on other sites

  • 0

Полагаю тут уже ничего не поможет. Если только на JS вычислять высоту верхнего блока, и отодвигать нижний блок отриц. марджином на высоту верхнего. Ну и то, боюсь, что получиться хрень.

Link to comment
Share on other sites

  • 0
Полагаю тут уже ничего не поможет. Если только на JS вычислять высоту верхнего блока, и отодвигать нижний блок отриц. марджином на высоту верхнего. Ну и то, боюсь, что получиться хрень.

javascript'ом можно контент местами поменять, поисковики вроде не обрабатывают javascript, а можно обсолютным позиционированием после загрузки страницы, к этому времени все размеры будут известны.

Link to comment
Share on other sites

  • 0
javascript'ом можно контент местами поменять, поисковики вроде не обрабатывают javascript, а можно обсолютным позиционированием после загрузки страницы, к этому времени все размеры будут известны.

Ну попробуй конеш, потом отпишись о результате.

Link to comment
Share on other sites

  • 0

Можно через display:table для контейнера и table-header-group/table-row-group/table-footer-group для самих элементов (как здесь). Но насколько это оправдано и семантично — каждый решает для себя...

Link to comment
Share on other sites

  • 0
Можно через display:table для контейнера и table-header-group/table-row-group/table-footer-group для самих элементов (как здесь). Но насколько это оправдано и семантично — каждый решает для себя...

Спасибо, нашел по ссылке то, что нужно. Для упрощения кода буду использовать конструкцию

<table>
<tbody>
<tr>
<td>
текст в коде идет первым, отображается вторым
</td>
</tr>
</tbody>
<thead>
<tr>
<td>
текст в коде идет вторым, отображается первым
</td>
</tr>
</thead>
</table>

Спасибо

Edited by alzasr
Link to comment
Share on other sites

  • 0

Ребята, а как быть если блоков не 2-3, а 6? Неужели в css нет никакой примочки чтобы управлять порядком блоков? или порядком строк в таблице или порядком записей в списке?

Можно через display:table для контейнера и table-header-group/table-row-group/table-footer-group для самих элементов (как здесь).

А зачем тут в стилях "height: 1px;" у блоков? что за прикол? убрал - ничего вроде не изменилось.

Edited by neobroker
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy