При изменении ширины браузера ширина колонок тоже должна изменяться
Обновлено: 08.07.2024
Менять ширину элемента можно, наведя мышь на правый его край, далее - зажимаете левую кнопку мыши и меняете размер элемента.
1. Попробуйте уменьшить размер внешнего div (двойная рамка) меньше ширины таблицы - таблица начнёт сжиматься.
Тот же эффект Вы достигнете если просто будете уменьшать размер окна браузера.
2. Попробуйте увеличить размер СТОЛБЦА таблицы (хочу менять именно ширину столбцов и чтобы край таблицы при этом менялся автоматически - для таблицы я не задаю WIDTH). Если Вы увеличиваете его так, что край таблицы достигает края внешнего div, то ширина столбца начинает увеличиваться, а таблица пытается остаться на странице полностью, уменьшая ширину других столбцов).
3. Примечательно, что розовый div ведёт себя вполне корректно - если все те же действия применить к нему.
ВОПРОС: МНЕ ОЧЕНЬ НУЖНО ЧТОБЫ ТАБЛИЦА ВЕЛА СЕБЯ КАК РОЗОВЫЙ ДИВ В ОБОИХ СЛУЧАЯХ! А именно если она по АВТОМАТИЧЕСКОЙ ширине должна стать больше родительского элемента - чтобы становилась и при этом становилась активной полоса прокрутки. И НЕ ИСПОЛЬЗОВАТЬ ДЛЯ ЭТОГО ДОПОЛНЕНИЯ В JS-коде!
Можно ли вообще это сделать вёрсткой (css + html)?
Ссылка на комментарий
Похожие публикации
Не могу закруглить углы у background-color. В чем проблема?
Добрый день, я новичок как на форуме, так и в верстке. Вопрос такой. Делаю таблицу с прицелом на мобильные устройства. Рабочее окно сайта шириной 800px и все таблицы я делал шириной строго 800px через тег <table> раньше было вот так: <table cellpadding="5" cellspacing="0" border="1" width="800px"> и таблицы все выглядели красиво и одинаково., но в мобильной версии они так же были 800 пикселей и их просмотреть было нереально. В общем в css файле добавил класс
.table_overfloated < overflow-x: scroll; display: block; border-collapse: collapse; >.table_overfloated tr < border 1px solid; min-width: 800px; >.table_overfloated td
Применил его к тегу <table> и теперь таблица на мобильнике прокручивается пальцем влево вправо, однако на сайте ширина таблицы делается соответственно контенту. И если одна таблица на странице еще более менее выглядит, то если их две и более то все они получаются разной ширины и выглядит это некрасиво.. Подскажите как сделать, чтобы таблицы все были шириной 800px, но на мобильной версии сайта их можно было пролистывать. Надеюсь понятно написал.:(
Здравствуйте! Я начинающая (ну очень начинающая), поэтому заранее прошу прощение за код . Надо сверстать макет. Сверстала (почти). Блоки едут. Что я упускаю? Заранее спасибо.
__________________Помощь в написании контрольных, курсовых и дипломных работ здесь
При уменьшении окна браузера блоки "наезжают друг на друга"
Подскажите пожалуйста, как решить данную проблему: при уменьшении окна браузера блоки "наезжают.
Разъезжаются блоки при изменении окна браузера
Здравствуйте! Помогите пожалуйста с проблемой разъезда блоков! Проект у меня на локальной машине.
конкретизировать? Что именно ужас и как не надо делать? То, что Вы исправили? Или что-то еще? (на будущее мне).
ну, вообщем так.
а, по сути - не грамматике - суть - а в свойствах css
Только - в том что это - не бус-сатрап.
а, с грамматикой - у самого - жирная 2. даже alt=""/> - не удосужился. тут - ужас, в другом. Только "ужастик" - только он - может учить - верстать в (px). даже максимальное значение - разумнее в (vw) и (vh). (px) -годен на подобное icon.
Сорри, не объяснил, что я подправил:
Вот тут есть небольшая ошибка(ну как ошибка, просто можно сделать проще), старайся по меньше использовать div'ы, ведь где то можно обойтись и родными тегами(для того же текста), и так вёрстка будет чище.
О стилях(добавил новое):
Используй современный подход в стилях(как в данном случае flexbox), ведь так проще.
Теперь, тебе на будущее:
От точи стиль кода, как я писал о разметке: старайся использовать стандартные теги(где они есть), вместо div'ов. В стилях(ну и не только в стилях) используй современный подход(конечно перед тем, как что то использовать, лучше проверить поддерживают ли браузеры то или иное свойство: отличный сайт), а то застрянешь во времени, как некоторые верстальщики(которые до сих пор верстают каркас сайта таблицей, ор).
Добавлено через 23 часа 5 минут
Upp
Помощь в написании контрольных, курсовых и дипломных работ здесь
Исчезновение div блока при уменьшении размера окна браузера
Добрый день, Форумчане Как правильно реализовать исчезающий при изменений размера окна браузера.
Анимация изменения размера блока
Как сделать анимацию изменения размера блока? Animate не подходит, т.к. Если делать анимацию при.
Запрет изменения размера формы и элементов при изменении шрифта и его размера
Здравствуйте. К слову вопрос название темы. А именно как запретить изменять размер формы и.
Т.е. варианты такие:
1) правую колонку сделать фиксированной ширины, левая пусть занимает всё оставшееся пространство.
2) ширины обеих колонок задать в процентах
3) обе колонки сделать фиксированной ширины и поместить их в див-обертку. Див-обертку центрировать.
Я ж не знаю, что Вам больше подходит.
Вот, например, вариант 3
Попробовал как вы сказали но у меня не получается нечего
Добавлено через 2 минуты
Сделал как вы сказали, нечего не вышло(
Вот теперь братан посмотрите мой сайт полностью с вашим кодом)
[del]
Front-end, я всё конечно понимаю, но как так сказать блок sidebar оказался за пределами блока center так сказать? Это вопрос для начала допроса с пристрастием.
И что тут не так, братан?
Если Вас не радует такое решение див оберните в ли с выравнивание по правому краю и будет Вам счастье и валидатор не заругает.
Сайт съезжает при масштабировании и при изменении размера браузера
Здравствуйте. Делал задание одно, все получилось, но в конце, когда начал проверять, что будет если.
Съезжает div при изменении размера браузера
К сожалению не разбираюсь в верстке. Помогите пожалуйста! Требуется вывести в одну строчку 3 div.
Сохранение размера блока при маштабировании
*Масштабировании* Есть блок div <div в CSS задаются размер и.
Два квадрата двигаются в противоположных направлениях
Задача: Два квадрата двигаются в противоположных направлениях и отталкиваются от стенок синего.
Почему только два кружочка двигаются?
Я создал 4 кружочка на странице, которые должны двигаться против часовой стрелки заменяя друг.
В данной статье поговорим о создании сеток в HTML. Разберём сетку в Twitter Bootstrap и приведём популярные решения для трёх случаев:
- old way — старый стиль, работающий во всех популярных браузерах;
- new way — современный стиль, работающий во всех современных браузерах (IE > 9) (twitter bootstrap 4);
- feature way — божественный стиль (будущий), работающий в прогрессивных браузерах.
Создание сеток одна из самых частых задач в CSS. Сначала их делали с помощью таблиц, но в дальнейшем появились более гибкие решения.
Одна из самых популярных реализаций колонок была представлена в Twitter Bootstrap 3.
Принцип работы в следующем:
- Создаём родителя (row), для которого задаём отрицательные отступы margin слева и справа. (Это необходимо, чтобы колонки располагались по центру без необходимости указывать дополнительные классы первому и последнему элементам, чтобы выровнять колонки);
- Так как колонки будут располагаться с помощью плавающего свойства float, к родителю применяется утилита clearfix, которая позволит нормализовать высоту родителя и устранит нежелательные сайд эффекты;
- Все дочерние элементы (.col) родителя получают положительные отступы слева и справа с помощью padding. Для позиционирования также устанавливается свойство float: left ;
- Считается, что в сетке не может быть более 12 колонок, поэтому базовая ширина колонки равна 1/12, в пересчёте на проценты
Создадим следующую HTML структуру со следующими стилями:
Сначала мы объявили константы:
- old-columns — количество колонок
- old-gutter — расстояние между колонками
Для родителя задали отступы слева и справа, а также добавили clearfix :
Для колонок добавили отступы и базовые стили, общие для всех:
Для примера, мы используем селекторы атрибутов ([class^=’old-column-’]), но в продакшене, старайтесь их изберать.
Саму сетку создали средствами SCSS:
Которая в итоге сгенерирует набор классов с постфиксами от 1 до 12:
Откроем в браузере:
Для добавления адаптивности, необходимо добавить точки остановок (breakpoints)для нужных размеров, а также задать соответствующие суффиксы классам колонок:
Как видно, для задания размеров мы использовали коллекции (map) в SCSS и с помощью цикла обошли все размеры и сгенерировали нужные классы с нужными суффиксами. Подробнее о работе map’ов в документации SASS.
В результате получим:
На gif’ке видно, как колонки изменяются в зависимости от ширины экрана.
Полную реализацию колонок, вы можете посмотреть в исходниках Twitter Bootstrap 3 в репозитории.
Преимущества:
Недостатки:
- Невозможность лаконичной реализации дополнительной возможности — одинаковая высота колонок.
Как и ранее (в предыдущей статье — CSS решения. Фиксированный блок плюс адаптивный блок) лучшим решением является использование микро скрипта, который следит за изменением ширины блоков и обновляет высоту блоков.
Более прогрессивным способ для создания колонок является использование flex .
Принцип работы заключается в следующем:
- Создаём родительский блок (.row) для которого указываем свойство display: flex . Так как колонки выстраиваются в линию и могут занимать больше 100%, для этого ставиться свойство flex-wrap: wrap ;
- Для создания корректных отступов задаём отрицательные margin-left и margin-right ;
- Для всех потомков первого уровня задаем свойства position: relative , которое гарантирует корректную обработку, width: 100% что позволит нормализовать свойства всех потомков и уравнять их права на доступную им ширину, а также отступы слева и справа с помощью padding ;
- Также создаются разные классы колонок (.col-1, .col-2, …), которые принимают соответствующие размеры в пропорции 1 к 12. В отличии от предыдущего решения, регулирование ширины колонок осуществляется с помощью свойств flex и max -width .
Создадим следующую структуру HTML и классы, описанные выше:
Как можно увидеть из реализации, решение почти совпадает с old-way.
Откроем в браузере:
Так как решение уже учитывает адаптивность изменим ширину браузера и посмотрим на результат:
Ознакомиться с полным решением можно в репозитории Twitter Bootstrap.
Добавим немного контента в колонки, чтобы посмотреть, что будет с высотой колонок:
Как видно из скриншота, все колонки получили высоту самой большой колонки.
Преимущества:
- Работает во всех современных браузерах (IE > 9)
- Колонки одинаковой высоты из «коробки»
Недостатки:
Последним решением является создание сеток средствами W3C — использование display: grid .
Принцип работы в следующем:
- Создаётся родительский блок, который будет сразу определять размеры и количество колонок. Блок получает свойство display: grid .
- Для задание строк используется свойство grid-template-rows , которое принимает доступные размеры строк. Например: 1fr — создаст сетку с 1 строкой; 1fr 2fr 1fr — создаст сетку с 3 строками, где средняя строка будет занимать 50% всей доступной высоты
- Для задания столбцов используется свойство grid-template-columns , которое принимает доступные размеры столбцов (аналогично grid-template-rows ).
Создадим сетку подобную тем, что приводились в примерах ранее:
Откроем в браузере:
На скриншоте видим, что отрицательных отступов нету и колонки занимают все доступное расстояние.
Так как мы использовали единицы гибкости (fr), колонки получаются одинаковой высоты.
Если изменим ширину:
Стоит отметить, что принципы создания сеток отличаются от модели сеток используемых в Twitter Bootstrap, которые приводились ранее. В данном случае блок, который объявляет сетку уже заранее знает все свои свойства, поэтому дополнительно указывать классы не нужно.
Преимущества:
Недостатки:
- Не работает в старых браузерах;
- Требует перестройки мышления по построению и использованию сеток.
Дополнение
Небольшая демонстрация работы всех трёх решений:
В данной статье рассмотрели основные решения, используемые для создания сеток.
Разобрали типовые решения, а также привели привели следующие реализации:
- старый стиль, который основан на решении Twitter Bootstrap 3;
- современный стиль, который основан на решении Twitter Bootstrap 4;
- будущий стиль, который основан на принципах построений сеток средствами CSS display: grid .
Спасибо за внимание!
Все исходники находятся на github, в репозитории:
Fafnur/medium-stories
This project was generated using Nx. 🔎 Nx is a set of Extensible Dev Tools for Monorepos. Nx Documentation 10-minute…
Для того, чтобы посмотреть состояние проекта на момент написания статьи, нужно выбрать соответствующий тег — css-grid.
Читайте также: