Авторский знак. Seosait21.ru Есть у человека надежда. Пока не поздно. Вгрызайся и изучай.
Нажимай и поддержи.

Пн Вт Ср Чт Пт Сб Вс
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30


Чувашия-это моя Россия

Ссылки на каскадные стили CSS - box-lines.

Поддержка Браузеров

Свойство box-lines не поддерживается ни в одном из основных браузерах.

Определение и использование. Свойство box-lines определяет, будет ли колонна на новой линии, когда заканчивается свободное пространство в родительском окне, то есть свойство box-lines — определяет, должен ли тянущийся бокс содержать несколько строк содержимого на странице сайта. Допустимые значения:

multiple — бокс может содержать несколько строк содержимого
single — бокс может содержать только одну строку содержимого

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

Таким образом, свойство box-lines определяет возможность блока содержать более одной строки содержимого. Свойство box-lines принимает значения single и multiple. По умолчанию стоит значение single.

Если у бокса дочерние элементы не растягиваются box-flex: 0 и их суммарная ширина превышает ширина бокса, то при написании box-lines: multiple в свойствах бокса может перенести непомещающиеся элементы на новую строку( при горизонтальной ориентации). Для вертикальной ориентации свойство действует аналогично только для высоты и новой колонки. Причем расположение блока на новой линии( в новой колонке) зависит от значения свойства box-align( start, end, center, stretch).

ВНИМАНИЕ!!! Данное свойство применимо для блоков с display: box и display: inline-box.

Самое мощное здесь даже не в том, что производится некое изменение некого участка страницы сайта. Самое мощное здесь в том, что свойство box-lines, которое действует через стили CSS3 автономно работает даже при отключения JavaScripta в браузере Вашего компьютера.


Синтаксис:

                 box-lines: single|multiple;

Определение и Использование

Default value: single
наследует: нет
Версия: CSS3
JavaScript синтаксис: object.style.boxLines="multiple"


Свойства Значения

Значение Описание
single Все дочерние элементы будут помещены в одной строке или столбце( элементы, которые не укладываются просто будут рассмотрены как переполнения)
multiple Поле позволяет расширить в несколько строк, чтобы разместить все дочерние элементы


Пишем программу - Указать, чтобы box-lines позволило расширить на несколько строк:

< !DOCTYPE html>
< html>
< head>
< style> 
.container
{
width:300px;
border:1px dotted black;

/* Firefox */
display:-moz-box;
-moz-box-orient:horizontal;
-moz-box-lines:multiple;

/* Safari and Chrome */
display:-webkit-box;
-webkit-box-orient:horizontal;
-webkit-box-lines:multiple;

/* W3C */
display:box;
box-orient:horizontal;
box-lines:multiple;
}

.box
{
width:100px;

/* Firefox */
-moz-box-flex: 1.0;

/* Safari and Chrome */
-webkit-box-flex: 1.0;

/* W3C */
box-flex: 1.0;
}
< /style>
< /head>
< body>

< div class="container">
  < div class="box">11111111111< /div>
  < div class="box">22222222222< /div>
  < div class="box">33333333333< /div>
  < div class="box">44444444444< /div>
< /div>

< p>< b>Внимание!!!< /b> Ни один из основных браузеров не поддерживают 
                                             свойство box-lines .< /p>

< /body>
< /html>                      

Результат программы:

11111111111
22222222222
33333333333
44444444444

Внимание!!! Ни один из основных браузеров не поддерживают свойство box-lines .




seosait21.ru
HTML

seosait21.ru
CSS

seosait21.ru
Web-диз.
HTML ссылка CSS ссылка ...

seosait21.ru
JavaScript

seosait21.ru
PHP

seosait21.ru
JQuery
JavaScript ссылка PHP ссылка JQuery ссылка

seosait21.ru
SEO.

seosait21.ru
MySQL

seosait21.ru
XML
... ... ...

обратно на главную     назад    дальше     вперед

ПОНРАВИЛОСЬ?
ПОДЕЛИСЬ с ДРУЗЬЯМИ: