Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > верстка с overflow

Автор: numerovan 11.11.2015, 18:53

Здравствуйте.
Подскажите пожалуйста как сделать следующее:

1. в окошке (некий блок div) показать как ленту чередующихся блоков в одну строчку, при этом под wraper-ом блок
не указывать явно ширину. Для ясности, покажу в разметке.

Код


<div id="parent">// тут у нас width:100%; height:100px; overflow-y:hidden; overflow-x:auto;
     <div class="parent_carcas">// вот в этом вот блоке переменая ширина. Можно ли ширину эту обойти и при этом 
//... сожержимое данного блока отображалось в одну линию. Элементов внутри может быть от 1 до большого кол-ва.
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          ....
     </div>   
</div>

2. как сделать отображение по умолчанию в блоке .parent_carcas (см. выше) содержимого по правую строну, а не по левую.
Т.е. загружается страница и содержимое находится и показывается по правую строну.

Автор: ksnk 11.11.2015, 19:51

Галерея? Смотри любую галерею, они все в разной степени одинаковые smile

Примерно так:

Код


.parent-carcas {
    width: 20000em;
    position:absolute;
   ... 
}
.parent {
    overflow: hidden;
    position: relative;
    width: ???px;
    height: ???px;
}
.item {
    float:left;
   ..
}

.parent-carcas, устанавливая отрицательный left можно позиционировать куда надо.

И да, отредактируй комментарий в своем коде - форум съехал :(

Автор: numerovan 11.11.2015, 19:57

Код


.parent-carcas {
    width: 20000em; // без этого ни как ?
    position:absolute;
   ... 
}

Автор: ksnk 11.11.2015, 21:10

Цитата(numerovan @ 11.11.2015, 19:57

)

без этого ни как ?

Никак. Верхний .parent обрежет все выступающие части своим overflow:hidden

Можно, конечно, вставлять все item в ячейки таблицы в одну строку. Так получится, что размер конструкции не нужно указывать. Зато разметка станет немного более громоздкой.

Автор: ksnk 11.11.2015, 21:44

А! Не увидел, что нужно вправо выровнять.

Можно https://jsfiddle.net/2oafdvv6/, например. Правда порядок получается обратный...

Автор: numerovan 11.11.2015, 22:23

Цитата

Можно вот так, например. Правда порядок получается обратный...

Если вы добавите чуть больше блоков с классом "item", то они пропадают в неизвестность - это из за position:absolute. Тут желательно этот .parent_carcas либо block либо table. И походу да что без ширины его не получится сделать ... хотя может что нибудь другие люди напишут.

Пока ситуацию решил следующим образом: в .parent_carcas{width:2000000px} ... далее яваскриптом подганяю перемещение скролла на право, а так же скриптом выставляю не такую огромную ширины, а только не обходимую, для размещения .item в нем.

Хотелось просто без участия яваскрипта.