Свойство float принимает одно из трех значений: left, right или none. Это свойство, примененное к тегу <div> с содержимым, позволяет создать боковое меню:
На рисунке ниже показаны эти два css-свойства в действии:
Здесь блок #left перемещен к левому краю. У него есть фиксированная ширина, однако у главного содержимого #content ее нет, что делает этот дизайн резиновым. Главный раздел страницы просто расширяется, заполняя окно браузера.
Элемент #left по высоте меньше элемента #content, но мы можем это исправить, добавив в разметку еще один элемент <div> и установив для него background-image шириной 270px, высотой 1px и цветом #ddd:
С точки зрения SEO основной контент должен быть ближе к началу страницы, чем вспомогательный контент боковых колонок. Давайте посмотрим, как это можно сделать:
<!DOCTYPE html>
<html>
<head>
<title>Шаблон, три колонки</title>
</head>
<body>
<div>
<div>
<div>
<div></div>
<div>
<div>
<h2>Lorem ipsum</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
..
</p>
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
</div>
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
</div>
<div></div>
</div>
</div>
</div>
</body>
</html>
png) right top repeat-y;
}
#footer {
clear: both;
height: 50px;
background: #2277aa;
}
Три колонки, фиксированный, контент сверху
Еще один способ разместить основной контент перед контентом боковых колонок — использовать отрицательный margin. В этом случае элементы #content, #left и #right можно разместить в любом порядке в html-коде и потом расположить их произвольно на экране. Использование отрицательного поля позволяет «втянуть» элемент, описываемый в коде позже, над элементом, предшествующим ему.
<!DOCTYPE html>
<html>
<head>
<title>Шаблон, три колонки</title>
</head>
<body>
<div>
<div></div>
<div>
<h2>Lorem ipsum</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
</p>
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
..
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
</div>
<div></div>
</div>
</body>
</html>
Как видите, левое поле элемента <div> должно быть равно ширине левого бокового меню. Если для левого бокового меню мы хотим добавить отступы 10px, то margin-left будет
Если боковое меню имеет границы, их тоже надо учитывать.
Теперь о том, как рассчитать величину отрицательного margin-left для элемента <div>. Складываем ширину элемента #content, левые и правые поля и отступы, а также левую и правую границы. Если центральный столбец имеет ширину 550px, имеет границу 1px, отступ 10px, а также левое поле 270px для размещения левого бокового меню:
550px + 1px + 1px + 10px + 10px + 270px = 842px
Давайте немного улучшим наш шаблон — добавим отступы и выравнивание колонок по высоте с помощью background-image:
<!DOCTYPE html>
<html>
<head>
<title>Шаблон, три колонки</title>
</head>
<body>
<div>
<div></div>
<div>
<div>
<h2>Lorem ipsum</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
</p>
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. ..
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
</div>
</div>
<div></div>
</div>
</body>
</html>
Одним из наиболее популярных вариантов верстки веб-страниц выступает двухколонный
макет, где в левой колонке располагаются ссылки, а в правой колонке —
основной контент. Такая схема достаточно традиционна и привычна для пользователей,
поэтому также пользуется признанием среди разработчиков (рис. 1).
Рис. 1. Двухколонный макет с навигацией слева
Создание двух колонок происходит с помощью стилевого свойства float со значением
left, которое применяется для левой колонки. При этом одновременно следует
установить отступ слева для правой колонки, значение которого равно ширине
левой колонки плюс расстояние между ними (пример 1).
Приведенный способ создания колонок хорош тем, что ширину первого слоя можно
задавать как в пикселах, так и процентах. При этом поменяются только значения
свойств width и margin-left (пример 2).
Если я попытаюсь переместить правый и левый дивы в соответствующие позиции (правый и левый), он, похоже, игнорирует цвет фона содержимого div. И другой код, который я пробовал с разных сайтов, похоже, не может перевести в мою структуру.
Спасибо за любую помощь!
13 ответов
когда вы плаваете эти два divs, содержимое div сжимается до нулевой высоты. Просто добавьте
<br/>
после #right div, но внутри содержимого div. Это заставит контент div окружить два внутренних, плавающих divs.
#content h2 #content h3 #content p #rightcol #rightcol h3 #rightcol h4 #rightcol p footer p footer a
article, section, aside, hgroup, nav, header, footer, figure, figcaption
{
дисплей: блок;
}
body {
семейство шрифтов: Arial, Helvetica, sans-serif;
}
#wrapper {
ширина: 960 пикселей;
цвет фона: #FFF;
маржа слева: авто;
маржа-право: авто;
}
header {
высота: 200 пикселей;
}
#logo {
}
nav {
ширина: 960 пикселей;
}
/ * Код навигации из Listamatic
http: // css.maxdesign.com.au/listamatic/horizontal03.htm
* /
nav ul {
отступ слева: 0;
маржа слева: 0;
цвет фона: # 209a9b;
цвет: #FFF;
плыть налево;
ширина: 100%;
}
nav ul li {
дисплей: встроенный; }
nav ul li a {
размер шрифта: 1em;
отступ: 10 пикселей 16 пикселей;
цвет фона: # 209a9b;
цвет: #FFF;
текстовое оформление: нет;
плыть налево;
граница справа: сплошной 1px #fff;
}
nav ul li a: hover {
цвет фона: # 999;
цвет: #fff;
}
.выделить {
font-weight: 900;
цвет: # 444;
}
#content {
отступ слева: 40 пикселей;
отступ справа: 40 пикселей;
padding-bottom: 20 пикселей;
плыть налево;
ширина: 580 пикселей;
}
#content h2 {
размер шрифта: 24 пикселя;
padding-top: 25 пикселей;
}
#content h3 {
размер шрифта: 18 пикселей;
padding-top: 25 пикселей;
font-weight: 200;
}
#content p {
размер шрифта: 12 пикселей;
padding-top: 15 пикселей;
высота строки: 16 пикселей;
}
раздел {
}
статья {
}
#rightcol {
плыть налево;
отступ слева: 40 пикселей;
ширина: 260 пикселей;
}
#rightcol h3 {
размер шрифта: 18 пикселей;
padding-top: 25 пикселей;
font-weight: 400;
}
#rightcol h4 {
размер шрифта: 16 пикселей;
padding-top: 25 пикселей;
font-weight: 200;
}
#rightcol p {
размер шрифта: 12 пикселей;
}
в сторону {
}
нижний колонтитул {
ясно: оба;
высота: 50 пикселей;
}
footer p {
размер шрифта: 11 пикселей;
цвет: # 333;
отступ слева: 40 пикселей;
}
footer a {
цвет: # 333;
текстовое оформление: нет;
}
Вот ссылка на окончательно оформленную веб-страницу: http: // www.allaboutweb.com/classes/examples/html5-two-column-style/
Демонстрация CSS с двумя столбцами — столбцы одинаковой высоты с кроссбраузерным CSS
Столбцы одинаковой высоты
Неважно, сколько содержимого находится в каждом столбце, цвета фона всегда будут растягиваться до высоты самого высокого столбца.
Размеры 2 колонн
Ширина каждого столбца составляет 50 процентов с заполнением по 2 процента с каждой стороны.
Никаких CSS-хаков
CSS, используемый для этого макета из 2 столбцов, на 100% действителен и не требует взлома.Чтобы преодолеть модель ломаного ящика Internet Explorer, не используются горизонтальные отступы или поля. Вместо этого этот дизайн использует процентную ширину и умное относительное позиционирование.
Нет изображений
Этот макет с двумя столбцами не требует изображений. Для многих дизайнов веб-сайтов с использованием CSS требуются изображения для раскрашивания фона столбцов, но в этом дизайне это не обязательно. Зачем тратить пропускную способность и драгоценные HTTP-запросы, если все можно делать на чистом CSS и HTML?
Нет JavaScript
JavaScript не требуется.Некоторые макеты веб-сайтов полагаются на хаки JavaScript для изменения размеров div и принудительного размещения элементов, но вы не увидите здесь ничего подобного.
Действительная строгая разметка XHTML
HTML-код в этом макете проверяется как строгий XHTML 1.0.
Кросс-браузерная совместимость
Этот макет из 2 столбцов был протестирован в следующих браузерах:
iPhone и iPod Touch
Mac
Safari
Firefox
Opera 9
Netscape 7 и 9
Окна
Firefox 1.5, 2 и 3
Safari
Opera 8 и 9
Explorer 5.5, 6 и 7
Google Chrome
Netscape 8
Этот макет БЕСПЛАТНО для всех.
Вам не нужно ничего платить. Просто просмотрите исходный код этой страницы и сохраните HTML-код на свой компьютер. Единственное, что я предлагаю — поместить CSS в отдельный файл. Однако, если вы чувствуете себя щедрым, дайте ссылку на эту страницу, чтобы другие люди тоже могли найти и использовать этот макет.
столбцов CSS
Пример <стиль> .multicol {
фон: бежевый;
отступ: 10 пикселей;
-webkit-columns: 3; / * Safari и Chrome * /
-моз-столбцов: 3; /* Fire Fox */
столбцы: 3; / * CSS3 * /
}
Пример столбцов
Свойство CSS columns — это сокращенное свойство для установки нескольких свойств, связанных с столбцами, в одном месте.В частности, он устанавливает свойства ширины и количества столбцов.
Это эффективный способ кодирования макетов с несколькими столбцами.
Попробуйте изменить значения, чтобы увидеть, как это повлияет на этот пример.
Свойство CSS columns — это сокращенное свойство для установки нескольких свойств, связанных с «столбцами» в одном месте.
В частности, свойство columns задает свойства column-width и column-count .
Свойство CSS columns — это эффективный способ кодирования многоколоночных макетов.
Обратите внимание, что порядок важен. Вы должны указать значения в том же порядке, что и в разделе «Синтаксис» ниже.
Определяет ширину каждого столбца.Значение может быть либо авто , либо фиксированной длиной (например, 120 пикселей ). Дополнительные сведения об этом значении см. В свойстве column-width .
<'количество столбцов'>
Определяет количество столбцов в многоколоночном элементе. Дополнительные сведения об этом значении см. В свойстве column-count .
Кроме того, все свойства CSS также принимают следующие значения ключевых слов всего CSS в качестве единственного компонента значения своего свойства:
начальный
Представляет значение, указанное в качестве начального значения свойства.
наследовать
Представляет вычисленное значение свойства родительского элемента.
снято
Это значение действует как наследовать или начальное , в зависимости от того, унаследовано свойство или нет. Другими словами, он устанавливает для всех свойств их родительское значение, если они наследуются, или их начальное значение, если они не наследуются.
Основная информация об имуществе
Начальное значение
Посмотреть отдельные объекты
Относится к
незамещенные элементы уровня блока (кроме элементов таблицы), ячейки таблицы и элементы встроенного блока
Унаследовано?
№
Медиа
Visual
Анимационный
Да (см. Пример)
Пример кода
Базовый CSS
/ *
Все это действительные объявления CSS для свойства columns .Пропущенные значения устанавливаются на свои начальные значения.
Кроме того, порядок значений не важен.
* /
столбцы: 220 пикселей; / * ширина столбца: 220 пикселей; количество столбцов: авто * /
столбцы: авто 220 пикселей; / * ширина столбца: 220 пикселей; количество столбцов: авто * /
столбцы: 3; / * ширина столбца: авто; количество столбцов: 3 * /
колонки: 3 авто; / * ширина столбца: авто; количество столбцов: 3 * /
колонки: авто; / * ширина столбца: авто; количество столбцов: авто * /
колонки: авто авто; / * ширина столбца: авто; количество столбцов: авто * /
Рабочий пример в HTML-документе
Пример <стиль> .multicol {
фон: бежевый;
отступ: 10 пикселей;
-webkit-columns: 3; / * Safari и Chrome * /
-моз-столбцов: 3; /* Fire Fox */
столбцы: 3; / * CSS3 * /
}
Пример столбцов
Свойство CSS columns — это сокращенное свойство для установки нескольких свойств, связанных с столбцами, в одном месте. В частности, он устанавливает свойства ширины и количества столбцов.
Это эффективный способ кодирования макетов с несколькими столбцами.
Попробуйте изменить значения, чтобы увидеть, как это повлияет на этот пример.
Попробуй
В этом примере используются префиксы поставщиков для многоколоночного макета из-за отсутствия поддержки браузером официального стандарта на момент написания.
Спецификации CSS
Поддержка браузера
Следующая таблица предоставлена Caniuse.com показывает уровень поддержки этой функции браузером.
Префиксы поставщиков
Для максимальной совместимости с браузером многие веб-разработчики добавляют свойства браузера, используя такие расширения, как -webkit- для Safari, Google Chrome и Opera (более новые версии), -ms- для Internet Explorer, -moz- для Firefox, -o- для более старых версий Opera и т. д. Как и в случае любого свойства CSS, если браузер не поддерживает проприетарное расширение, он просто проигнорирует его.
Эта практика не рекомендуется W3C, однако во многих случаях единственный способ проверить свойство — это включить расширение CSS, совместимое с вашим браузером.
Основные производители браузеров обычно стремятся придерживаться спецификаций W3C, и когда они поддерживают свойство без префикса, они обычно удаляют версию с префиксом. Кроме того, W3C советует поставщикам удалить свои префиксы для свойств, которые достигают статуса кандидата в рекомендации.
Многие разработчики используют Autoprefixer, постпроцессор для CSS.Autoprefixer автоматически добавляет префиксы поставщиков в ваш CSS, поэтому вам это не нужно. Он также удаляет старые ненужные префиксы из вашего CSS.
Вы также можете использовать Autoprefixer с препроцессорами, такими как Less и Sass.
CSS-макет с несколькими столбцами, уровень 2
CSS-макет с несколькими столбцами, уровень 2
Аннотация
Эта спецификация описывает макеты с несколькими столбцами в CSS, языке таблиц стилей для Интернета. Используя функциональные возможности, описанные в спецификации, контент можно разделить на несколько столбцов с промежутком и правилом между ними.
Это дельта-спецификация по сравнению с CSS Multi-column Level 1. Как только спецификация уровня 1 станет окончательной,
его содержание будет интегрировано в эту спецификацию,
который затем заменит его.
До тех пор, CSS Multi-column Level 2 содержит только дополнения и расширения для уровня 1
.
CSS — это язык для описания отображения структурированных документов.
(например, HTML и XML)
на экране, на бумаге, в речи и т. д.
Статус этого документа
Это общедоступная копия редакционного черновика.Он предназначен только для обсуждения и может измениться в любой момент.
Его публикация здесь не означает одобрения его содержания W3C.
Не цитируйте этот документ иначе, как в незавершенной работе.
Вопросы GitHub являются предпочтительными для обсуждения этой спецификации.
При регистрации проблемы, пожалуйста, поместите текст «css-multicol» в заголовок,
желательно так:
«[Css-multicol] … сводка комментария… ».
Все вопросы и комментарии архивируются,
а также исторический архив.
Этот документ был создан Рабочей группой CSS (часть Style Activity).
Этот документ был подготовлен группой, работающей под
Патентная политика W3C.
W3C ведет публичный список любых раскрытий патентов, сделанных в связи с результатами работы группы;
эта страница также включает инструкции по раскрытию патента.
Лицо, которое фактически знает о патенте, который, по его мнению, содержит существенные пункты формулы (-ий), должен раскрыть информацию в соответствии с разделом 6 Патентной политики W3C.
Этот документ регулируется документом W3C от 1 февраля 2018 года.
Содержание
1 Введение
2 модуля взаимодействия
3 Многоколонная модель
4 Количество и ширина столбцов
4,1 ширина столбца
4,2 количество столбцов
4,3 столбца
4.4 Псевдо-алгоритм
4.5 Контекст стекирования
5 Пробелы в столбцах и правила
5.1 столбец-пробел
5.2 цвет столбца-правила
5.3 стиль столбца-правила
5,4 ширина-правило столбца
5.5 столбец-линейка
6 разрывов столбцов
6,1 обрыв до, обрыв после, обрыв внутрь
7 Spanning columns
7,1 колонна-пролет
8 Заполнение столбцов
8.1 столбец-заполнитель
9 Перелив
9.1 Переполнение внутри многоцветных элементов
9.2 Пагинация и переполнение за пределами многоцветных элементов
Благодарности
Вопросы конфиденциальности и безопасности
Соответствие
Условные обозначения в документе
Классы соответствия
Требования к ответственному внедрению CSS
Частичные реализации
Реализации нестабильных и проприетарных функций
Реализации функций уровня CR
Индекс
Термины, определенные в данной спецификации
Термины, определенные ссылкой
Ссылки
Нормативные ссылки
Индекс собственности
Указатель выпусков
1.Введение
Добавить заключительный контент с предыдущего уровня
2. Взаимодействие модулей
Этот документ определяет новые функции, отсутствующие в более ранних спецификациях.
Кроме того, в окончательном варианте он заменит следующее:
3. Многоколонная модель
Добавить заключительный контент с предыдущего уровня
4. Количество и ширина столбцов
Добавить заключительный контент с предыдущего уровня
4.1.ширина столбца
Добавить заключительный контент с предыдущего уровня
4.2. количество столбцов
Добавить заключительный контент с предыдущего уровня
4.3. колонны
Добавить заключительный контент с предыдущего уровня
4.4. Псевдо-алгоритм
Добавить заключительный контент с предыдущего уровня
4,5. Контекст стекирования
Добавить заключительный контент с предыдущего уровня
5. Промежутки колонн и правила
Добавить заключительный контент с предыдущего уровня
5.1. колонна-щель
Добавить заключительный контент с предыдущего уровня
5.2. столбец-правило-цвет
Добавить заключительный контент с предыдущего уровня
5.3. стиль столбца-правила
Добавить заключительный контент с предыдущего уровня
5.4. ширина правила столбца
Добавить заключительный контент с предыдущего уровня
5.5. правило столбца
Добавить заключительный контент с предыдущего уровня
6. Разрывы столбцов
Предыдущий уровень данной спецификации определял, как
пользовательский агент должен определить, где размещаются разрывы столбцов
когда контент размещен в нескольких столбцах.С тех пор был представлен модуль [CSS3-BREAK].
чтобы определить, как разбивать контент по страницам,
столбцы или области CSS,
и заменяет раздел разрыва столбца в [CSS3-MULTICOL].
Эта спецификация относится к [CSS3-BREAK] по этой теме.
6.1. обрыв до, обрыв после, обрыв внутри
Свойства break-before, break-after и break-inside теперь определены в [CSS3-BREAK].
7. Стяжные колонны
Свойство column-span позволяет элементу занимать несколько столбцов.Эта спецификация добавляет <целое число> к значениям, доступным на предыдущем уровне.
7.1. колонна-пролет
Это свойство описывает, сколько столбцов занимает элемент. Значения:
нет
все
Добавить заключительный контент с предыдущего уровня
<целое число>
Элемент занимает указанное количество столбцов.Значения должны быть больше 0.
Если указанное целочисленное значение равно,
или больше, чем количество столбцов в элементе multicol,
количество охваченных столбцов будет таким же, как если бы было указано количество столбцов: все.
Это определение недостаточно.
Считает ли диапазон столбцов: 1 как диапазон столбцов: нет,
или он создает гаечный ключ (который является BFC)?
Какие столбцы он охватывает?
Как это влияет на расчеты высоты и взаимодействует с заполнением столбцов
авто
Количество столбцов, охватываемых элементом
зависит от его внешнего размера min-content во внутреннем направлении многоколоночного контейнера.Если он меньше используемого значения ширины столбца,
это то же самое, как если бы диапазон-столбца: ни один не был указан.
В противном случае количество охваченных столбцов представляет собой наименьшее положительное целое число n , для которого n × ширина столбца + ( n -1) × пробел столбца больше, чем внешнее минимальное содержимое. размер.
Если это будет больше, чем количество столбцов,
количество охваченных столбцов будет таким же, как если бы было указано количество столбцов: все.
Если диапазон-столбца: 1 не работает так же, как диапазон-столбца: нет,
должно ли это вести себя как column-span: 1 или как column-span: none, если элемент достаточно мал?
Добавить последний контент с предыдущего уровня
возможно, с поправками на <целое число> значений
8. Колонки наполнения
Добавить заключительный контент с предыдущего уровня
8.1. заполнение столбца
Добавить заключительный контент с предыдущего уровня
9.Перелив
9.1. Перелив внутри многоцветных элементов
Добавить заключительный контент с предыдущего уровня
9.2. Пагинация и переполнение за пределами многоцветных элементов
Добавить заключительный контент с предыдущего уровня
Благодарности
Этот документ основан на работе Хокона Виума Ли в [CSS3-MULTICOL],
и основан на нескольких старых предложениях и комментариях к более старым предложениям.
Среди авторов:
Добавить окончательный список авторов уровня 1
Вопросы конфиденциальности и безопасности
Delta spec lol
Соответствие
Условные обозначения в документе
Требования к соответствию выражаются комбинацией
описательные утверждения и терминология RFC 2119.Ключевые слова «ДОЛЖНЫ»,
«НЕ ДОЛЖЕН», «ОБЯЗАТЕЛЬНО», «ДОЛЖЕН», «НЕ ДОЛЖЕН», «ДОЛЖЕН», «НЕ ДОЛЖЕН»,
«РЕКОМЕНДУЕТСЯ», «МОЖЕТ» и «ДОПОЛНИТЕЛЬНО» в нормативных частях настоящего
документ следует интерпретировать, как описано в RFC 2119.
Однако для удобства чтения эти слова не отображаются в верхнем регистре.
буквы в этой спецификации.
Весь текст данной спецификации является нормативным, кроме разделов.
явно помечены как ненормативные, примеры и примечания. [RFC2119]
Примеры в этой спецификации представлены словами «например»
или выделяются отдельно от нормативного текста с помощью class = "example" ,
как это:
Это информативный пример.
Информационные примечания начинаются со слова «Примечание» и выделяются
нормативный текст с class = "note" , например:
Примечание, это информационная заметка.
Рекомендации — это нормативные разделы, призванные привлечь особое внимание.
отделяется от другого нормативного текста с помощью , например
это: UA ДОЛЖНЫ предоставлять доступную альтернативу.
Классы соответствия
Соответствие данной спецификации
определяется для трех классов соответствия:
таблица стилей
А CSS
таблица стилей.
рендерер
UA, который интерпретирует семантику таблицы стилей и отображает
документы, которые их используют.
инструмент для разработки
UA, который пишет таблицу стилей.
Таблица стилей соответствует этой спецификации
если все его утверждения, которые используют синтаксис, определенный в этом модуле, действительны
в соответствии с общей грамматикой CSS и отдельными грамматиками каждого
функция, определенная в этом модуле.
Рендерер соответствует этой спецификации
если в дополнение к интерпретации таблицы стилей, как определено
соответствующие спецификации, он поддерживает все определенные функции
по этой спецификации, правильно проанализировав их
и соответствующим образом отрисовываем документ.Однако неспособность
UA для правильной визуализации документа из-за ограничений устройства
не делает UA несоответствующим. (Например, UA не
требуется для отображения цвета на монохромном мониторе.)
Инструмент разработки соответствует этой спецификации
если он пишет синтаксически правильные таблицы стилей в соответствии с
общая грамматика CSS и отдельные грамматики каждой функции в
этот модуль и соответствовать всем остальным требованиям соответствия таблиц стилей
как описано в этом модуле.
Требования к ответственному внедрению CSS
В следующих разделах определены несколько требований соответствия
для ответственного внедрения CSS,
таким образом, чтобы обеспечить возможность взаимодействия в настоящем и будущем.
Частичные реализации
Чтобы авторы могли использовать правила синтаксического анализа с прямой совместимостью для назначения резервных значений, средства визуализации CSS должны обрабатывать как недопустимые
(и игнорировать при необходимости)
любые at-правила, свойства, значения свойств, ключевые слова и другие синтаксические конструкции
для которых у них нет полезного уровня поддержки .В частности, пользовательские агенты не должны выборочно игнорировать
неподдерживаемые значения свойств и соблюдают поддерживаемые значения в одном объявлении многозначного свойства:
если какое-либо значение считается недопустимым (как и неподдерживаемые значения),
CSS требует, чтобы все объявление игнорировалось.
Реализации нестабильных и проприетарных функций
Чтобы избежать конфликтов с будущими стабильными функциями CSS,
CSSWG рекомендует следовать передовым методам реализации нестабильных функций и проприетарных расширений CSS.
Реализации функций уровня CR
Когда спецификация достигает стадии рекомендации кандидата,
разработчикам следует выпустить реализацию без префикса
любой функции уровня CR, которую они могут продемонстрировать
быть правильно реализованным согласно спецификации,
и следует избегать раскрытия префикса варианта этой функции.
Для установления и поддержания взаимодействия CSS через
реализациях, рабочая группа CSS просит, чтобы не экспериментальные
Средства визуализации CSS отправляют отчет о реализации (и, при необходимости,
тестовые наборы, использованные для этого отчета о реализации) в W3C до
выпуск реализации каких-либо функций CSS без префикса.Тестовые наборы
отправленные в W3C могут быть проверены и исправлены CSS.
Рабочая группа.
Дополнительная информация об отправке тестовых примеров и отчетов о реализации
можно найти на веб-сайте Рабочей группы CSS http://www.w3.org/Style/CSS/Test/.
Вопросы следует направлять в список рассылки public-css-testsuite@w3.org.
Россен Атанасов; Алан Стернс.CSS Regions Module Level 1. 9 октября 2014 г. WD. URL: https://www.w3.org/TR/css-regions-1/
[CSS-SIZING-3]
Tab Atkins Jr .; Элика Этемад. Модуль определения внутренних и внешних размеров CSS, уровень 3. 4 марта 2018 г. WD. URL: https://www.w3.org/TR/css-sizing-3/
[CSS-VALUES-3]
Tab Atkins Jr .; Элика Этемад. Модуль «Значения и единицы CSS», уровень 3. 29 сентября 2016 г. CR. URL: https://www.w3.org/TR/css-values-3/
Россен Атанасов; Элика Этемад. CSS Fragmentation Module Level 3. 9 февраля 2017 г. CR. URL: https://www.w3.org/TR/css-break-3/
[CSS3-MULTICOL]
Флориан Ривоал; Рэйчел Эндрю. CSS Multi-column Layout Module Level 1. 28 мая 2018 г. WD. URL: https://www.w3.org/TR/css-multicol-1/
[RFC2119]
С. Браднер. Ключевые слова для использования в RFC для обозначения уровней требований. Март 1997 г.Лучшая текущая практика. URL: https://tools.ietf.org/html/rfc2119
Индекс собственности
Имя
Стоимость
Начальный
Применимо к
дюйм.
% возрастов
Тип анимации
Канонический порядок
Расчетное значение
колонна-пролет
нет | <целое число> | все | авто
нет
проточные блочно-уровневые элементы
нет
НЕТ
дискретный
за грамматику
указанное значение
Указатель выпусков
Добавить окончательный контент с предыдущего уровня ↵
Добавить окончательный контент с предыдущего уровня ↵
Добавить окончательный контент с предыдущего уровня ↵
Добавить окончательный контент с предыдущего уровня ↵
Добавить окончательный контент с предыдущего уровня ↵
Добавить окончательный контент с предыдущего уровня ↵
Добавить окончательный контент с предыдущего уровня ↵
Добавить окончательный контент с предыдущего уровня ↵
Добавить окончательный контент с предыдущего уровня ↵
Добавить окончательный контент с предыдущего уровня ↵
Добавить окончательный контент с предыдущего уровня ↵
Добавить окончательный контент с предыдущего уровня ↵
Добавить окончательный контент с предыдущего уровня ↵
Добавить окончательный контент с предыдущего уровня ↵
Добавить окончательный контент с предыдущего уровня ↵
Это определение недостаточно.
Считает ли диапазон столбцов: 1 как диапазон столбцов: нет,
или он создает гаечный ключ (который является BFC)?
Какие столбцы он охватывает?
Как это влияет на расчеты высоты и взаимодействует с заполнением столбцов
↵
Если column-span: 1 не работает так же, как column-span: none,
должно ли это вести себя как column-span: 1 или как column-span: none, если элемент достаточно мал? ↵
Добавить окончательный контент с предыдущего уровня
возможно с корректировками для учета <целых> значений ↵
Добавить окончательный контент с предыдущего уровня ↵
Добавить окончательный контент с предыдущего уровня ↵
Добавить окончательный контент с предыдущего уровня ↵
Добавить окончательный контент с предыдущего уровня ↵
Добавить окончательный список участников уровня 1 ↵ # propdef-column-span Ссылка в:
Разделение списка элементов на две колонки с помощью CSS
язык-php
497
2 мая 2017 г., 08:20
У меня есть список элементов (взятых из CMS), номер которых неизвестен.Мне нужно отобразить этот список в двух столбцах с примерно равным количеством элементов. Следующий код работает, но ниже я объясню, почему он проблематичен:
содержание
содержание
содержание
содержание
содержание
ul {
дисплей: гибкий;
flex-wrap: обертка;
}
Хорошо, если содержимое предметов всегда одинаковой высоты. Но когда в одном элементе содержится гораздо более длинное содержимое, элемент-брат в той же строке вынужден расширяться, чтобы соответствовать той же высоте.Я не хочу этого. Я хочу, чтобы два столбца были полностью независимыми с точки зрения высоты элементов.
Возможно ли использование только CSS?
Ответ 1
Может и так попробовать, но порядок поменяют
ul {
дисплей: блок;
}
ul li {
плыть налево;
ширина: 50%;
}
содержание
содержание
содержание
содержание
содержание
Ответ 2
Вам нужно столбца :
ul {
количество столбцов: 2;
}
содержание
содержание
содержание
содержание
содержание
Ответ 3
ul {
-webkit-columns: 2;
-моз-столбцов: 2;
столбцы: 2;
отступ слева: 0;
}
ul li {
позиция в стиле списка: внутри;
-webkit-column-break-inside: избегать;
разрыв страницы внутрь: избегать;
взлом внутрь: избегать;
}
содержание
содержание
содержание
содержание
содержание
Примечание столбца на самом деле является сокращением для <'column-width'> || <'количество столбцов'>.Это означает, что вы также можете указать ширину (в пикселей , % , em , см , в …) вместо указания количества столбцов.
Также обратите внимание, что вам нужно установить list-style-position: inside; для элементов ol и ul для отображения их дочерних элементов
маркеры (или числа) в правом столбце, за исключением Firefox, который по умолчанию устанавливает list-style-position на внутри . .