Dismiss Notice
ВАШИ ПРАВА ОГРАНИЧЕНЫ!

Зарегистрируйтесь на форуме, чтобы стать полноценным участником сообщества!

Вопросы по верстке

Discussion in 'Свободное общение' started by SymbioZ, Jan 27, 2016.

27.01.16 в 17:13
27.01.16 в 17:53
2
2,867
0
  1. TopicStarter Overlay
    SymbioZ

    SymbioZ Бывалый

    Joined:
    Sep 27, 2015
    Messages:
    131
    Best Answers:
    0
    Ratings:
    +35 / 0 / -0
    Всем салют. Немного изучаю вёрстку на уровне чайника, поэтому возникают вопросы, некоторые могу решить методом научного гуглирования, некоторые не могу, поэтому надеюсь вы мне поможете.
    Собственно постараюсь объяснить свою проблему. Есть на скрине 3 блока (их я назвал одинаковыми цифрами, чтобы не путались вы) блок1, блок2, блок3.
    Каждый из блоков должен прилипать друг к другу по вертикали (К блоку один снизу должен прилипнуть блок2, а к блоку 2 в свою очередь блок 3). Это было бы легко решить если бы блоки были фиксированные, но они адаптивные имеют ширину в процентах и height:auto;
    Как сделать так, чтобы блок3 прилипал к блоку2, а то у меня выходит что он прилипает только к блоку 1 и залазиет под блок 2. На скрине показан отступ блока 3 от блока 2, его нужно и убрать какраз.
    [​IMG]
     
  2. nylmen

    Staff Member VIP Кинотрафик v2

    Joined:
    Nov 2, 2015
    Messages:
    2,569
    Best Answers:
    0
    Ratings:
    +702 / 2 / -0
    Без кода трудно сказать
    Скорее всего в ксс padding стоит.
    Или адрес сайта или параметры класса этого нужны. Я конечно не ас в этом, мб более опытные скажут и без этого как решить.
     
  3. TopicStarter Overlay
    SymbioZ

    SymbioZ Бывалый

    Joined:
    Sep 27, 2015
    Messages:
    131
    Best Answers:
    0
    Ratings:
    +35 / 0 / -0
    В данном случае блок .text должен прилипнуть к блоку .slider, чтобы при изменении ширины(width:100%) и высотой auto картинки уменьшаются в размере, а блок 3 (с текстом) увеличивает отступ.
    @media screen and (max-width:980px) {
    .wrap {
    max-width: 100%;
    height:auto;

    }
    .banner img {
    height:auto;
    width: 100%;
    display: block;
    }
    .textbox img {
    height: auto;
    width: 100%;
    display: block;

    margin-top: auto;
    }
    .slider {
    height: auto;
    width: 100%;
    display: block;


    }
    .text{

    height:auto;
    display: block;

    }
    .textleft {
    color: #515151;
    margin-top: 40px;
    margin-left: 80px;
    width: 44%;
    display: inline-block;
    float: left;
    font-family: 'Montserrat', sans-serif;
    }
    .textright {
    color: #515151;
    margin-top: 40px;
    margin-left: 10px;

    display: inline-block;
    float: left;
    width: 44%;
    font-family: 'Montserrat', sans-serif;
    padding-right: 10px;
    }
    }
     
Яндекс.Метрика