Достижение динамических столбцов в CSS3 - PullRequest
Новая
       6

Достижение динамических столбцов в CSS3

3 голосов
/ 15 октября 2011

Я надеюсь, вы можете помочь! Вот параметры:

  • Один родительский контейнер с динамической шириной и высотой
  • Переменное число детей
  • Высота родителя устанавливается с помощью JS, в зависимости от размера окна
  • Когда высота родителей падает, его ширина должна увеличиваться в соответствии с дочерними элементами
  • Дети должны заполнить контейнер сначала по вертикали, а затем по горизонтали
  • Дочерние элементы должны быть прямыми потомками родителя - для строк и столбцов не может быть вложенных блоков или дополнительной структуры
  • Дети имеют одинаковый размер
  • Дети должны быть относительно позиционированы, и их положение не может быть рассчитано в JS
  • JS разрешено устанавливать только высоту / ширину родителя

HTML 

<ol>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
 <li>6</li>
 <li>7</li>
 <li>8</li>
 <li>9</li>
</ol>

BOX MODEL 

[-------------]
[-[1]-[4]-[7]-]
[-[2]-[5]-[8]-]
[-[3]-[6]-[9]-]
[-------------]

BOX MODEL ПОСЛЕ ВЫСОТЫ SHRINKS 

[---------------------]
[-[1]-[3]-[5]-[7]-[9]-]
[-[2]-[4]-[6]-[8]-----]
[---------------------]

Возможно ли это с блочными моделями CSS / CSS3?

Спасибо !!

Ответы [ 3 ]

2 голосов
/ 16 октября 2011

multi-column общеизвестно противоречиво реализован, хотя это звучит как самый простой и стандартный способ реализации этого:

http://jsfiddle.net/383uF/1/

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

0 голосов
/ 16 октября 2011

Я не верю, что возможно заполнение по вертикали, а затем по горизонтали без использования колонок CSS3;Тем не менее, я не знаю, как получить поведение сжатия для столбцов.

Это делает все, что вы хотите, когда в WebKit (он распространяется в нижней части Gecko), за исключением сокращения вподходит и что он может сломаться в середине li. 

<!DOCTYPE html>
<html><head>
  <title>untitled</title>
  <style type="text/css" media="screen">
    html, body { height: 100%; }
    ol {
      margin: 0;
      padding: 0;
      border: 1px solid blue;
      height: 50%;
      -webkit-column-width: 10em;
      -webkit-column-fill: auto;
    }
     li {
       -webkit-break-inside: avoid;
       position: relative;
       margin: 0;
       padding: 0;
       width: 10em;
       height: 7em;
       display: block;
       border: 1px solid red;
     }
  </style>
</head><body>
  <ol>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
   <li>6</li>
   <li>7</li>
   <li>8</li>
   <li>9</li>
  </ol>
</body></html>
0 голосов
/ 15 октября 2011

Я бы сказал, использовать display: inline-block, но они свернутся до новых строк, только если на родительском элементе будет задана ширина.Ваши параметры говорят, что JS может установить ширину родительского элемента, поэтому, если вы хотите рассчитать, какой шириной должен быть прямоугольник, чтобы правильно свернуть строки, то вы можете использовать этот метод.

По сути, каждый дочерний элемент должен быть установлен в inline-block со своей установленной шириной / высотой, и затем вы можете добавить margin-right для каждого, чтобы расположить их отдельно друг от друга, а затем добавить margin-left к родительскому элементу так, чтобы левыйтакже имеет соответствующее расстояние.Затем на основе высоты родителя вычислите, сколько строк может иметь родительский элемент, чтобы вычислить, насколько широким должен быть родитель для правильного сворачивания дочерних элементов (имейте в виду, что не следует включать поле margin-leftродителя по ширине).Все это будет простой CSS, CSS3 не требуется.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...