Squeak.ru - шаблоны программирования

Плавающие элементы div располагаются горизонтально, чтобы заполнить родительский элемент div и изменить его размер.

Я создал этот слайдер плитки метро, ​​но у меня возникли проблемы с его отзывчивостью.

Вот что я создал на данный момент: http://bit.ly/189HN4Y

Первая проблема заключается в том, что плитки не выстраиваются горизонтально, если я не окружу их div шириной 1000 пикселей.

Вторая проблема заключается в том, что плитки не реагируют. Это может быть связано с тем, что мне нужно было установить ширину в пикселях для окружающего блока div, но я думаю, что это может быть вызвано другими проблемами. Я бы хотел, чтобы плитки оставались сложенными горизонтально и просто уменьшались при просмотре на мобильном устройстве.

Я создал эти плитки в Wordpress с помощью плагина Tile Builder. Если вы посмотрите их пример на мобильном устройстве, вы увидите, что он сжимается, и это желаемое поведение, которое я хочу: http://bit.ly/189HRSa

Я некоторое время пытался настроить окружающий div, область виджета, которую я создал, и даже тему, но ничего не сработало. Надеюсь, еще одна пара глаз поможет мне понять это...

plugins wordpress css responsive-design
28.11.2013

Ответы:


1

Чтобы сделать его отзывчивым, вам нужно будет определить ширину каждого элемента в процентах, следуя моему примеру:

http://jsfiddle.net/KAeak/1/

Я использовал только одну обертку

<div class="wrapper">
    <div id="element-1">Test</div>
    <div id="element-2">Test</div>
    <div id="element-3">Test</div>
</div>
28.11.2013
  • Использование процента по ширине, но не по высоте, искажает мои плитки. Мне нужно, чтобы ширина и высота уменьшались в мобильных браузерах. Установка процента для ширины И высоты приводит к исчезновению плитки. 29.11.2013
  • Просто установите минимальную высоту и максимальную высоту, вы также можете использовать максимальную ширину и минимальную ширину :) 29.11.2013

    • 2

    1. Чтобы решить проблему с выравниванием тайлов по центру, удалите display: table-cell; или просто добавьте width: 1000px в класс .art-layout-cell вашего файла style.css в строке 1480;

    2. Чтобы сделать его адаптивным, используйте процентную ширину в плитках ИЛИ/И @media screen подобно этому.

    В этом примере вы говорите, что они используют <meta name="viewport" content="width=device-width, initial-scale=1.0 />, чтобы он сжимался, но ВСЕ сайты тоже сжимаются. Лучший способ сделать это адаптивным — это @media screen.

    28.11.2013
  • Я вообще не спрашивал про выравнивание по центру. Мне нужно, чтобы ширина и высота плиток уменьшались при сжатии браузера. 29.11.2013
  • Как не? Был ваш первый выпуск! @media запросы вам не помогают? или, возможно, процентная ширина? 29.11.2013
    • Новые материалы
    Угловая структура архитектуры
    Обратите внимание, что эта статья устарела, я решил создать новую с лучшей структурой и с учетом автономных компонентов: https://medium.com/@marekpanti/angular-standalone-architecture-b645edd0d54a..
    «Данные, которые большинство людей используют для обучения своих моделей искусственного интеллекта, поставляются со встроенным…
    Первоначально опубликовано HalkTalks: https://hacktown.com.br/blog/blog/os-dados-que-a-maioria-das-pessoas-usa-para-treinar-seus-modelos-de-inteligencia-artificial- ja-vem-com-um-vies-embutido/..
    Сильный ИИ против слабого ИИ: различия парадигм искусственного интеллекта
    В последние годы изучению и развитию искусственного интеллекта (ИИ) уделяется большое внимание и прогресс. Сильный ИИ и Слабый ИИ — две основные парадигмы в области искусственного интеллекта...
    Правильный способ добавить Firebase в ваш проект React с помощью React Hooks
    React + Firebase - это мощная комбинация для быстрого и безопасного создания приложений, от проверки концепции до массового производства. Раньше (знаете, несколько месяцев назад) добавление..
    Создайте API с помощью Python FastAPI
    Создание API с помощью Python становится очень простым при использовании пакета FastAPI. После установки и импорта вы можете создать приложение FastAPI и указать несколько конечных точек. Каждой..
    Веселье с прокси-сервером JavaScript
    Прокси-серверы JavaScript — это чистый сахар, если вы хотите создать некоторую общую логику в своих приложениях, чтобы облегчить себе жизнь. Вот один пример: Связь клиент-сервер Мы..
    Получить бесплатный хостинг для разработчиков | Разместите свой сайт за несколько шагов 🔥
    Статические веб-сайты — это веб-страницы с фиксированным содержанием и его постоянным содержанием. Но теперь статические сайты также обрабатывают динамические данные с помощью API и запросов...