Как я могу сделать поплавок с CSS?

Question

Я знаю, что CSS поддерживает только левые и правые значения для свойства float, но есть ли метод для реализации плавающей вершины? Я постараюсь объяснить. У меня есть следующий код:

<div style="float:left">
<div style="float:left">
<div style="float:left">
....

С этим кодом каждый div перемещается влево до тех пор, пока не будет достигнут правый предел страницы. Я хочу сделать то же самое, но по вертикали, чтобы каждый div помещался внизу предыдущего, а затем, когда достигнут нижний предел страницы, создается новый столбец. Есть ли способ сделать это, используя только CSS (и, возможно, редактирование HTML-кода)?

Answer 1

Просто используйте vertical-align:

.className {
    display: inline-block;
    vertical-align: top;
}

Answer 2

Единственный способ сделать это только с помощью CSS - это использовать CSS 3, который не будет работать во всех браузерах (только последнее поколение, например FF 3.5, Opera, Safari, Chrome).

Действительно, в CSS 3 есть замечательное свойство: column-count, которое вы можете использовать следующим образом:

#myContent{
  column-count: 2;
  column-gap: 20px;
  height: 350px;
}

Если #myContent оборачивает остальные ваши div.

Подробнее здесь: http://www.quirksmode.org/css/multicolumn.html

Как вы можете прочитать, есть серьезные ограничения в использовании этого. В приведенном выше примере он будет складываться только в один столбец, если содержимое переполняется. в mozilla вы можете использовать свойство column-width, которое позволяет вам разделять содержимое на столько столбцов, сколько необходимо.

В противном случае вам придется распределять содержимое между разными div в Javascript или в бэкэнде.

Answer 3

Hugogi Raudel предложил интересный способ добиться этого с помощью CSS. предположим, что здесь наша HTML разметка:

<ul>
  <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>
</ul>

Вы можете получить 3-рядный столбец, используя этот код CSS:

li:nth-child(3n+2){
  margin: 120px 0 0 -110px;
}

li:nth-child(3n+3) {
  margin: 230px 0 0 -110px;
}

А вот и конечный результат:

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

• Вот живая демонстрация: http://codepen.io/HugoGiraudel/pen/DoAIB
• Подробнее об этом можно прочитать в блоге Хьюго

Answer 4

Нет float:top, только float:left и float:right

Если вы хотите отобразить div под собой, вам нужно будет сделать:

<div style="float:left;clear:both"></div>
<div style="float:left;clear:both"></div>

Answer 5

Я попробовал это просто для удовольствия - потому что я тоже хотел бы найти решение.

скрипка: http://jsfiddle.net/4V4cD/1/

HTML:

<div id="container">
<div class="object"><div class="content">one</div></div>
<div class="object"><div class="content">two</div></div>
<div class="object"><div class="content">three</div></div>
<div class="object"><div class="content">four</div></div>
<div class="object tall"><div class="content">five</div></div>
<div class="object"><div class="content">six</div></div>
<div class="object"><div class="content">seven</div></div>
<div class="object"><div class="content">eight</div></div>
</div>

CSS:

#container { 
width:300px; height:300px; border:1px solid blue;
transform:rotate(90deg);
-ms-transform:rotate(90deg); /* IE 9 */
-moz-transform:rotate(90deg); /* Firefox */
-webkit-transform:rotate(90deg); /* Safari and Chrome */
-o-transform:rotate(90deg); /* Opera */
}
.object {
float:left;
width:96px;
height:96px;
margin:1px;
border:1px solid red;
position:relative;
}
.tall {
width:196px;
}

.content {
padding:0;
margin:0;
position:absolute;
bottom:0;
left:0;
text-align:left;
border:1px solid green;
-webkit-transform-origin: 0 0;
transform:rotate(-70deg);
-ms-transform:rotate(-90deg); /* IE 9 */
-moz-transform:rotate(-90deg); /* Firefox */
-webkit-transform:rotate(-90deg); /* Safari and Chrome */
-o-transform:rotate(-90deg); /* Opera */
}

I Вы можете видеть, что это будет работать с более высокими / более широкими div. Просто надо думать боком. Я предполагаю, что позиционирование станет проблемой. Некоторые из них должны помочь transform-origin.

Answer 6

Вот решение, которое работает (почти идеально) в FF, Opera, Chrome:

    <style>
    html {height:100%}
    p {page-break-inside:avoid;text-align:center;
       width:128px;display:inline-block; 
       padding:2px;margin:2px;border:1px solid red; border-radius: 8px;}
    a {display:block;text-decoration:none}
    b {display:block;color:red}
    body {
       margin:0px;padding:1%;
       height:97%; /* less than 98 b/c scroolbar */
      -webkit-column-width:138px;
      -moz-column-width:138px;
      column-width:138px;
    }
    </style>

    <body>
    <p><b>title 1</b>
    <a>link 1</a>
    <a>link 2</a>
    <a>link 3</a>
    <a>link 4</a>
    </p>

    <p><b>title 2</b>
    <a>link 1</a>
    <a>link 2</a>
    <a>link 3</a>
    <a>link 4</a>
    <a>link 5</a>
    </p>

    </body>

Хитрость заключается в том, что "P-break-inside: избежать" на P и ширине столбца на BODY Он поставляется с динамическим количеством столбцов. Текст в A может быть многострочным, а блоки могут иметь различную высоту.

Может быть, у кого-то есть что-то для Edge и IE

Answer 7

Чтобы достичь этого с помощью CSS3, это будет не сложно, если я правильно вас понимаю. Допустим, HTML DIV выглядит следующим образом:

<div class="rightDIV">
   <p>Some content</p>
<div>
<!-- -->
<div class="leftDIV">
   <p>Some content</p>
</div>

И CSS будет следующим. Следующий CSS сделает так, чтобы ваш DIV выполнил плавающий элемент влево, который «приклеит» его слева от родительского элемента DIV. Затем вы используете «top: 0», и он «прикрепит его» к верхней части окна браузера.

  #rightDIV {
       float: left
       top: 0
    }
  #leftDIV {
       float: right;
       top: 0
   }

Answer 8

Я просто делаю с JQuery.

Я тестировал в Firefox и IE10.

В моей задаче предметы имеют разную высоту.

<!DOCTYPE html>
<html>
<head>
    <style>
        .item {
            border: 1px solid #FF0;
            width: 100px;
            position: relative;
        }
    </style>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body>
    <script>
        function itemClicked(e) {
            if (navigator.appName == 'Microsoft Internet Explorer')
                e.removeNode();
            else
                e.remove();
            reposition();
        }

        function reposition() {
            var px = 0;
            var py = 0;
            var margeY = 0;
            var limitContainer = $('#divContainer').innerHeight();
            var voltaY=false;

            $('#divContainer .item').each(function(key, value){
                var c = $(value);

                if ((py+c.outerHeight()) > limitContainer) {
                    px+=100;
                    margeY-=py;
                    py=0;
                    voltaY=true;
                }

                c.animate({
                    left:px+'px',
                    top:margeY+'px'
                });

                voltaY=false;
                py+=c.outerHeight();
            });
        }

        function addItem() {
            $('#divContainer').append('<div class="item" style="height: '+Math.floor(Math.random()*3+1)*20+'px;" onclick="itemClicked(this);"></div>');
            reposition();
        }

    </script>
    <div id="divMarge" style="height: 100px;"></div>
    <div id="divContainer" style="height: 200px; border: 1px solid #F00;">
        <!--div class="item"></div-->
    </div>
    <div style="border: 1px solid #00F;">
        <input type="button" value="Add Item" onclick="addItem();" />
    </div>
</body>
</html>

Answer 9

<div class="block blockLeft">...</div>
<div class="block blockRight">...</div>
<div class="block blockLeft">...</div>
<div class="block blockRight">...</div>
<div class="block blockLeft">...</div>
<div class="block blockRight">...</div>

block {width:300px;}
blockLeft {float:left;}
blockRight {float:right;}

Но если количество элементов div не фиксировано или вы не знаете, сколько это может быть, вам все равно нужен JS. используйте jQuery :even, :odd

Answer 10

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