Как я могу сделать вершину плавающую с CSS?
4 ответа
Единственный способ сделать это с помощью только CSS - использовать CSS 3, который не будет работать в каждом браузере (только в последнем поколении, таком как FF 3.5, Opera, Safari, Chrome).
Действительно, в CSS 3 есть замечательное свойство: количество столбцов, которое вы можете использовать так:
#myContent{
column-count: 2;
column-gap: 20px;
height: 350px;
}
Если #myContent обертывает другие ваши div.
Подробнее здесь: http: //www.quirksmode .org / css / multicolumn.html
Как вы можете прочитать там, существуют серьезные ограничения в использовании этого. В приведенном выше примере он будет добавляться к одному столбцу только в случае переполнения содержимого. в mozilla вы можете использовать свойство column-width, которое позволяет вам разделить контент на столько столбцов, сколько необходимо.
В противном случае вам придется распределять контент между различными div в Javascript или в серверной части.
Вы могли бы что-то сделать с одноуровневыми селекторами, например:
div + div + div + div{
float: left
}
Не пробовал, но это может привести к смещению 4-го оставшегося div, возможно, делая то, что вы хотите. Опять не полностью поддерживается.
Нет float: top , только float: left и float: right
Если вы хотите отобразить div под друг друга вы должны будете сделать:
<div style="float:left;clear:both"></div>
<div style="float:left;clear:both"></div>
Я думаю, что лучший способ выполнить то, о чем вы говорите, - это иметь набор div, которые будут вашими столбцами, и заполнить их так, как вы описали. Затем заполните эти div по вертикали контентом, о котором вы говорите.