1. Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела
    Скрыть объявление

Позиционирование элементов в HTML

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем berTalino, 4 авг 2018.

Метки:
  1. berTalino

    berTalino

    Регистрация:
    4 авг 2018
    Сообщения:
    2
    Симпатии:
    0
    Ребят, есть такая задача: На моем сайте с ДЕСКТОП версии есть блоки со списками:

    <div class="let-column" style="width: 49%; float: left">
    <ul>
    <li>Таб_1</li>
    <li>Таб_2</li>
    <li>Таб_3</li>
    </ul>
    </div>

    <div class="right-column" style="width: 49%; float: left">
    <ul>
    <li>Тело_1</li>
    <li>Тело_2</li>
    <li>Тело_3</li>
    </ul>
    </div>

    Что дает мне некую природу ТАБОВ в 2 колонки.

    Требуется на МОБИЛЬНОЙ версии сайта сделать так, чтобы ТЕ ЖЕ блоки располагались вот так

    <div class="let-column" style="width: 49%; float: left">
    <ul>
    <li>Таб_1</li>
    <li>Тело_1</li>
    <li>Таб_2</li>
    <li>Тело_2</li>
    <li>Таб_3</li>
    <li>Тело_3</li>
    </ul>
    </div>

    <div class="right-column" style="width: 49%; float: left; display: none">
    <ul>
    </ul>
    </div>
     
  2. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    Видимо, вы сами не понимаете, что вам надо, если пытаетесь склеить вёрстку двух списков в один. Это всё делается исключительно средствами css.
    И что-либо подсказать будет возможно только увидев эту вёрстку вживую, а не огрызок даже без стилей.
     
  3. berTalino

    berTalino

    Регистрация:
    4 авг 2018
    Сообщения:
    2
    Симпатии:
    0
    1. Хорошо .. вот сайт - http://cp11502.tmweb.ru
    2. Речь об этом аккордеоне - http://joxi.ru/bmo6YxqhxplBwr
    3. На мобилках должно быть вот так - http://joxi.ru/brREea1cJa81zA
    --- Добавлено, 4 авг 2018 ---
    ВОт так решил:

    isMobile = {
    Android: function() {
    return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function() {
    return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function() {
    return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function() {
    return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function() {
    return navigator.userAgent.match(/IEMobile/i);
    },
    any: function() {
    return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
    };
    if (isMobile.any()) {
    for (var i = $('.faq-tab').length; i >= 0; i--) {
    $('.faq-tab').eq(i-1).after($('.tabs__item'+i));
    }
    }