Верстка средствами DIV - смещение с перестановкой блоков

Статус
Закрыто для дальнейших ответов.

Serg-24

Member
Регистрация
09.04.2016
Сообщения
19
Возникла проблема с перестановкой блоков посредством их применения в нужном (другом) порядке при уменьшении размера страницы с большего на меньший.
Как прописать коды, что бы правый блок № 3 - сместился под левый № 1,
и блок № 2 - сместился под блок № 1 и встал под его правый нижний угол.
В итоге, блок № 2 должен обтекаться контентом (текстом) который находится в блоке № 3.
 

Вложения

BaNru

Пацифизжу
Команда форума
Регистрация
13.11.2010
Сообщения
4 138
Либо вкладывать один в другой, либо абсолютное позиционирование, либо попробовать на FLEX'ах реализовать, хотя там скорее всего тоже надо будет или вкладывать или позиционировать.

Разумеется надо использовать media queries для узкой версии
 

Serg-24

Member
Регистрация
09.04.2016
Сообщения
19
А можете этот пример расписать в css ?
Может подскажите посмотреть где аналог для последующей реализации.
 

Serg-24

Member
Регистрация
09.04.2016
Сообщения
19
BaNru сказал(а):
Взял за основу вот от сюда:
http://csstemplater.com/

И переделал в что-то такое:
https://jsfiddle.net/BaNru/8qz26h94/
Спасибо. 2 ссылка порадовала. Немного изменил содержание этой страницы и вроде получилось что хотел.
Не знаю как сохранить эту страницу в сети и показать. Подскажите куда нажать, что бы сохранить сей работы результат?
BaNru сказал(а):
Либо вкладывать один в другой, либо абсолютное позиционирование, либо попробовать на FLEX'ах реализовать, хотя там скорее всего тоже надо будет или вкладывать или позиционировать.

Разумеется надо использовать media queries для узкой версии
- FLEX'ах - дайте ссылку для знакомства с этим.
- media queries уже использую, но пока трудно понимаю в этом позицианировании, а именно что и как работает.
Вот мои страницы:
1 - Работает поциционирование как нужно (смещаются блоки один под другой - http://xn--24-6kcca2hd6be1b.xn--p1ai/10.02.php
2 - а здесь нужно внести изменения что бы класс с ценою встал (при уменьшении страницы) под нижний блок с права - http://xn--24-6kcca2hd6be1b.xn--p1ai/10.00.php
 

Serg-24

Member
Регистрация
09.04.2016
Сообщения
19
BaNru сказал(а):
На Русском страница с применением флекс - это хорошо, но попробую без Флексов обойтись (если получится).
Спасибо(чки)!
 

Serg-24

Member
Регистрация
09.04.2016
Сообщения
19
BaNru посоветовал посмотреть https://jsfiddle.net/BaNru/8qz26h94/ - вот что получилось:
Но как без "прилюдий" добиться складывания (как на последней картинке - которая 830px ?
Вот код:
Код:
.wrap-per {

 width: 100%;
}
.container {
 width: 660px;
 height: 500px;
 float: left;
 -overflow: hidden;
}
.contentos {
 min-width: 660px;  
 max-width: 680px;
}
/* Right Sidebar--*/
.right-sidebar {
 float: left;
 min-width: 270px;  
 max-width: 660px; /* ширина блока 2 */
 min-height: auto;
 position: relative;
 margin-left: 0px;
 -margin-top: 12px;
 position: relative;
}
.right-sidebar .div1 {
  background: #FFACAA;
}
.right-sidebar .div2 {
  background: #B08FFE;
  -width:100px;
}
@media (max-width:850px){/* ширина складывания --*/
.contentos{
 min-width: 270px;  
 max-width: 650px;
 min-height:auto;
}
 .right-sidebar{ /* отступ блока 1и2 -при уменьшении страницы - сдвиг на 300px */
  width: 100%;
  -margin-left:300px;
}
 .right-sidebar .div1 {float: left;}
 .right-sidebar .div2 {
 float: right;
 position:absolute;
 top:0;
 left:480px; /* сдвиг блока 2 под галерею */
}
}
-@media (max-width: auto; min-height: 500px; -max-height: 850px;){
.right-sidebar {
 min-width: 270px;  
 max-width: 300px;
 min-height: 475px;
-max-height: 850px;
 }
}
 

Вложения

BaNru

Пацифизжу
Команда форума
Регистрация
13.11.2010
Сообщения
4 138
Ну так и указывайте

@media (max-width:1420px){}
А вот тут ошибка

-@media
Или я чего-то не знаю. Что за тирешка в начале?

Как вы правильно поняли - вы можете хоть сотню @media указывать, для разных разрешений.

Конкретно я подсказать не могу, потому что нет полного когда в который смотреть.
Вас надо выложить страничку в инет на хостинг или на http://jsfiddle.net/ (или аналогичный сервис), которую вы правите.
На сайте этого нет.
 

Serg-24

Member
Регистрация
09.04.2016
Сообщения
19
Благо дарю Вас BaNru!
-@media - это я так (что бы не удалять вдруг потом понадобиться) отключаю то что ненужно или пока не используется.

Вот временная страница - http://www.xn--80a2agbdc.xn--p1ai/gormen..html
В ней (происходят испытания) все что потом будет применено для самого сайта.
 

BaNru

Пацифизжу
Команда форума
Регистрация
13.11.2010
Сообщения
4 138
Serg-24 сказал(а):
это я так (что бы не удалять вдруг потом понадобиться)
Для этого есть комментарии
/* то что скрыть */

Но так на этой странице же другое, не то что изначально требовалось.
Тебе получается не надо див2.
Удали его, оставь код такой

<div class="line-block-t right-sidebar">

<div class="div1"><strong>Right Sidebar:</strong> Integer velit. Vestibulum nisi nunc, accumsan ut, vehicula sit amet, porta a, mi. Nam nisl tellus, placerat eget, posuere eget, egestas eget, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In elementum urna a eros. Integer iaculis. Maecenas vel elit.Integer velit. Vestibulum nisi nunc, accumsan ut, vehicula sit amet, porta a, mi. Nam nisl tellus, placerat eget, posuere eget, egestas eget, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In elementum urna a eros. Integer iaculis. Maecenas vel elit.</div>

<div id="table-knop11" class="knopka-2"><!-- Таблица цены -->
<!-- Кнопка -->
<div class="row goods">
<div class="b1c-good col-xs-12">
<div class="inside">
<div id="kup-2" class="b1c-name"> Часы 12S-016 </div><!-- Артикул -->
<div class="text-left b1c-price margin-top:-20px"> <!-- Стоимость (с лева) -->
<div class="rubl-2">2550 <br>
<div class="rub-img-2" title="РУБЛЬ">
<div class="row goods">
<div class="col-xs-7"><button id="rub-kup-2" class="b1c" title="Сделать покупку">Купить</button></div></div></div></div></div></div></div></div>
</div><!-- / Кнопка --> <!-- div2 -->

<!-- .right-sidebar -->
</div>

А в стилях, к #table-knop11 добавь

position: absolute;
right: 0;
top: 0;

Это на мелком разрешение. А на большом поправь враппер
Код:
.wrapper {
    max-width: 100%;
}
 

Serg-24

Member
Регистрация
09.04.2016
Сообщения
19
Спасибо BaNru, но мне все таки нужно как на картинках в начале. А есть там <div2> или без него можно обойтись - это как получится. Главное правый блок при уменьшении страницы должен опускаться (складываться) под левый а кнопка вставать под левый блок его правого низа - причем вокруг кнопки должно быть обтекание текста (что бы кнопка давала возможность текст с описанием видеть).
Ваш код поставил (Вы увидите в строке "BaNru - Sidebar:"), кнопке дал класс 12 (table-knop12) - получилось не то что нужно.

А почему при растягивании страницы выстраивания в ряд всех блоков нет - это поправим и выставим их в 1 ряд.
 
Статус
Закрыто для дальнейших ответов.
Верх Низ