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

<p>я знаю, что css поддерживает только левые и правые значения для свойства float, но есть ли метод для реализации плавающей вершины? я постараюсь объяснить. у меня есть следующий код:</p><pre><code><div style="float:left"> <div style="float:left"> <div style="float:left"> .... </code></pre><p>с этим кодом каждый div перемещается влево, пока не будет достигнут правый предел страницы. я хочу сделать то же самое, но по вертикали, чтобы каждый div помещался внизу предыдущего, а затем, когда достигнут нижний предел страницы, создается новый столбец. есть ли способ сделать это, используя только css (и, возможно, редактирование кода html)?</p>

<p>просто используйте <code>vertical-align</code>:</p><pre class="lang-css prettyprint-override"><code>.classname { display: inline-block; vertical-align: top; } </code></pre>

<p> <a href="http://hugogiraudel.com">hugogi raudel</a> предложил интересный способ добиться этого с помощью <code>css</code>. предположим, вот наша разметка <code>html</code>:</p><pre><code><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> </code></pre><p>вы можете получить 3-рядный столбец, используя этот код <code>css</code>:</p><pre><code>li:nth-child(3n+2){ margin: 120px 0 0 -110px; } li:nth-child(3n+3) { margin: 230px 0 0 -110px; } </code></pre><p>и вот конечный результат:<br> <img src="https://i.stack.imgur.com/vcmwp.png" alt="enter image description here"><br> то, что мы делаем здесь, это добавление соответствующего поля для каждого элемента в строке. это ограничение подхода заключается в том, что вы должны определить количество строк столбца. это не будет динамичным. я уверен, что есть варианты использования, поэтому я включил это решение здесь. </p><ul> <li>вот живая демонстрация: <a href="http://codepen.io/hugogiraudel/pen/doaib">http://codepen.io/hugogiraudel/pen/doaib</a> </li> <li>вы можете прочитать больше об этом в хьюго <a href="http://hugogiraudel.com/blog/float-down">сообщение в блоге</a> </li> </ul>

<p>нет <code>float:top</code>, только <code>float:left</code> и <code>float:right</code></p><p>если вы хотите отобразить div друг под другом, вам нужно сделать:</p><pre><code><div style="float:left;clear:both"></div> <div style="float:left;clear:both"></div> </code></pre>

<p>я попробовал это просто для удовольствия - потому что я тоже хотел бы найти решение.</p><p>скрипка: <a href="http://jsfiddle.net/4v4cd/1/">http://jsfiddle.net/4v4cd/1/</a> </p><p>html:</p><pre><code><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> </code></pre><p>css:</p><pre><code>#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 */ } </code></pre><p>вы можете видеть, что это будет работать с более высокими/более широкими div. просто надо думать боком. я думаю, что позиционирование станет проблемой. transform-origin должен помочь некоторым в этом.</p>

<p>вот решение, которое работает (почти идеально) в ff, opera, chrome:</p><pre><code> <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> </code></pre><p>хитрость заключается в том, что «p-break-inside: избежать» на p и ширине столбца на body. он поставляется с динамическим количеством столбцов. текст в a может быть многострочным, а блоки могут иметь различную высоту.</p><p>может быть, у кого-то есть что-то для edge и ie</p>

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

<pre><code><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;} </code></pre><p>но если количество элементов div не фиксировано или вы не знаете, сколько это может быть, вам все равно нужен js. использовать jquery <code>:even</code>, <code>:odd</code></p>

<p>чтобы добиться этого с помощью css3, это будет не так сложно, если я правильно вас понимаю. допустим, html div выглядит следующим образом:</p><pre><code><div class="rightdiv"> <p>some content</p> <div> <!-- --> <div class="leftdiv"> <p>some content</p> </div> </code></pre><p>и css будет следующим. следующий css сделает так, чтобы ваш div выполнил плавающий элемент влево, который «приклеит» его слева от родительского элемента div. затем вы используете «top: 0», и он «прикрепит его» к верхней части окна браузера.</p><pre><code> #rightdiv { float: left top: 0 } #leftdiv { float: right; top: 0 } </code></pre>

<p>я просто делаю с jquery.</p><p>я тестировал в firefox и ie10.</p><p>в моей задаче предметы имеют разную высоту.</p><pre><code><!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> </code></pre>

<p>уловка, которая работала для меня, состояла в том, чтобы изменить режим записи на время выравнивания div.</p><p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.outer{ /* limit height of outer div so there has to be a line-break*/ height:100px; /* tell the browser we are writing chinese. this makes everything that is text top-bottom then left to right. */ writing-mode:vertical-lr; } .outer > div{ /* float:left behaves like float:top because this block is beeing aligned top-bottom first */ float:left; width:40px; /* switch back to normal writing mode. if you leave this out, everything inside the div will also be top-bottom. */ writing-mode:horizontal-tb; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div class="outer"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>one</div> <div>two</div> <div>three</div> <div>four</div> </div></code></pre> </div> </div> </p>

<p>вы могли бы быть в состоянии сделать что-то с родственными селекторами, например:</p><pre><code>div + div + div + div{ float: left } </code></pre><p>не пробовал, но это может привести к тому, что 4-й дивив остался, возможно, делая то, что вы хотите. опять не полностью поддерживается.</p>

<p>я знаю, что этот вопрос старый. но любой, кто хочет сделать это сегодня здесь, вы идете.</p><p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>div.floatablediv{ -webkit-column-break-inside: avoid; -moz-column-break-inside: avoid; column-break-inside: avoid; } div.floatcontainer{ -webkit-column-count: 2; -webkit-column-gap: 1px; -webkit-column-fill: auto; -moz-column-count: 2; -moz-column-gap: 1px; -moz-column-fill: auto; column-count: 2; column-gap: 1px; column-fill: auto; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div style="background-color: #ccc; width: 100px;" class="floatcontainer"> <div style="height: 50px; width: 50px; background-color: #ff0000;" class="floatablediv"> </div> <div style="height: 70px; width: 50px; background-color: #00ff00;" class="floatablediv"> </div> <div style="height: 30px; width: 50px; background-color: #0000ff;" class="floatablediv"> </div> <div style="height: 40px; width: 50px; background-color: #ffff00;" class="floatablediv"> </div> <div style="clear:both;"></div> </div></code></pre> </div> </div> </p>

<p>это работает, примените в <code>ul</code>:</p><pre><code>display:flex; flex-direction:column; flex-wrap:wrap; </code></pre>