1

Тема: Позиціонування блоків

Є ось такий приклад коду:

HTML

<div class="main">
</div>
<div class="bottom1">
<div class="bottom">
</div>
</div>

CSS

.main {
  position: relative;
  margin: 0 auto -100px;
  width: 600px;
  height: 2000px;
  background: green;
}
.bottom1 {
  position: relative;
  margin: 0 auto;
  width: 600px;
}
.bottom {
  position: relative;
  width: 200px;
  height: 100px;
  background: red;
  left: 500px;
}

Ось здублював на JSFiddle: https://jsfiddle.net/sa08cf8b/

Потрібно зробити так, щоб при зменшенні ширини огляду червоний блок внизу просто поступово зникав у правому краю, а смуга прокрутки з'являлася лише тоді, коли ширина менша 600 пікс, тобто вже зачіпає зелений основний блок.

Є ідеї?

Подякували: 221VOLT1

2 Востаннє редагувалося Monolith (08.05.2017 00:45:13)

Re: Позиціонування блоків

overflow-x: hidden;

Має допомогти, якщо я Вас правильно зрозумів...

Подякували: 221VOLT1

3

Re: Позиціонування блоків

При overflow-x: hidden половина червоного блока за замовчуванням прихована, а треба, щоб вона приховувалася без смуги прокрутки лише, коли зменшується ширина перегляду.

От дивіться: в даному прикладі при ширині області перегляду 700 пікс ще видно обидва елементи повністю, а при меншій ширині, наприклад, 650 пікс, уже з'являється смуга прокрутки. А потрібно, щоб вона з'являлася лише коли ширина буде меншою 600 пікс, тобто ширини основного блока.

Подякували: 221VOLT1

4 Востаннє редагувалося Monolith (08.05.2017 13:17:42)

Re: Позиціонування блоків

@media screen and (min-width: 600px) {
  oveflow-x: hodden; // для якого там треба блоку
}
Подякували: ivaniura, 221VOLT2

5

Re: Позиціонування блоків

Трішки не те, але близько. Не поспав півночі, але дійшло таки до мене: можна обернути весь вміст у ще один блок div, і задати йому overflow: hidden та мінімальну ширину, до якої не буде обрізатися вміст, в даному випадку 600 пікс.

Ось приклад: https://jsfiddle.net/rv9gk013/

Подякували: 0xDADA11C7, 221VOLT2

6

Re: Позиціонування блоків

ivaniura написав:

Трішки не те, але близько. Не поспав півночі, але дійшло таки до мене: можна обернути весь вміст у ще один блок div, і задати йому overflow: hidden та мінімальну ширину, до якої не буде обрізатися вміст, в даному випадку 600 пікс.

Ось приклад: https://jsfiddle.net/rv9gk013/


а яка суть цього всього? :-X
бо особисто я не дав би такому шансу для існування...
так як в даний час 95% всіх проектів які розробляються мають бути респонсів...
років два тому такий спосіб використовували хіба для респонду табличного контенту... тепер це можна всьо зробити наступним способом https://css-tricks.com/examples/Respons … onsive.php

7

Re: Позиціонування блоків

Розумію, але таке було поставлене завдання...