it-swarm.com.ru

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

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

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

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

63
mck89

Единственный способ сделать это только с помощью 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 или в бэкэнде.

27
Guillaume Flandre

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

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

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

15
Arash Milani

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

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

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

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

скрипка: 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 */
}

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

5
Ron

Вот решение, которое работает (почти идеально) в 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

2
user6594402

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

2
iandisme
<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

2
glazsasha

Чтобы добиться этого с помощью 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
   }
2
Jason

Я просто делаю с 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>
2
Flavio Sousa

Уловка, которая работала для меня, состояла в том, чтобы изменить режим записи на время выравнивания 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>

1
KarlsFriend

Вы могли бы быть в состоянии сделать что-то с родственными селекторами, например:

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

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

0
matpol

Я знаю, что этот вопрос старый. Но любой, кто хочет сделать это сегодня здесь, вы идете.

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

0
aBetterGamer

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

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