Как я могу сделать float сверху с помощью CSS?

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

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

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

ОТВЕТЫ

Ответ 1

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

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

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

Если #myContent обертывает ваши другие divs.

Дополнительная информация здесь: http://www.quirksmode.org/css/multicolumn.html

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

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

Ответ 2

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

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

Ответ 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;
}

И вот конечный результат:
enter image description here
То, что мы делаем здесь, это добавление соответствующего поля для каждого элемента в строке. Ограничение этого подхода заключается в том, что вам необходимо определить количество строк столбца. это не будет динамичным. Я уверен, что у него есть варианты использования, поэтому я включил это решение здесь.

Ответ 4

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

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

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

Ответ 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 должно помочь кому-то в этом.

Ответ 6

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

Ответ 7

<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

Ответ 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>

Ответ 9

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

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

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

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

Ответ 10

Вот решение, которое работает (почти идеально) в 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 и ширину столбца на BODY. Он поставляется с динамическим числом столбцов. Текст в может быть многострочным, а блоки могут иметь разную высоту.

Возможно, у кого-то есть что-то для Edge и IE

Ответ 11

Трюк, который сработал у меня, заключался в том, чтобы изменить режим записи на время разделения div.

.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;

}
<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>

Ответ 12

Возможно, вы сможете что-то сделать с помощью селекторов, например:

div + div + div + div{
float: left
}

Не пробовал, но это может поплавать с 4-го дивизиона, возможно, делая то, что вы хотите. Опять не полностью поддерживается.

Ответ 13

Это работает, применяется в ul:

display:flex;
flex-direction:column;
flex-wrap:wrap;