Как плавать: сверху?

У меня есть следующая HTML-страница с несколькими парами DIV-элементов. Эти элементы генерируются со случайными значениями для левого поля.Как плавать: сверху?

Дополнительная информация: DIV-элементы в файле HTML должны оставаться в данном порядке.

<html> 
<head> 
    <style type="text/css"> 
     .box{ 
      height: 50px; width: 50px; border: 1px solid black; 
      text-align: center; margin-bottom: 5px; 
     } 
    </style> 
    <title></title> 
</head> 
<body> 
    <div class="box">1</div> 
    <div class="box" style="margin-left: 30px">2</div> 
    <div class="box" style="margin-left: 90px">3</div> 
    <div class="box" style="margin-left: 120px">4</div> 
    <div class="box" style="margin-left: 240px">5</div> 
</body> 
</html>

В результате страница выглядит следующим образом:

actual page layout

Есть ли способ, чтобы выровнять Div-elemets в верхней части страницы с чистого CSS? Элементы DIV должны складываться, если они не находятся полностью рядом с предыдущим DIV. Вот почему элементы 2 и 4 находятся во второй строке. Поскольку нет «float: top;» Команда, я понятия не имею, как достичь следующую структуру:

desired page layout

Поскольку моя проблема до сих пор не ясно, вот еще один пример, чтобы пояснить, что макет должен работать со случайными генерируемых DIV-элементов:

enter image description here

Если элемент не помещается рядом с предыдущим элементом, он должен складывают. Если он подходит, он должен соответствовать вершине.

Если с чистым CSS нет способа, возможно также применение обхода JS.

источник

2013-11-18 benny.la

Почему бы вам просто не использовать 'float: left'? – AfromanJ

Потому что он хочет, чтобы его div плавал сверху, посмотрите на вторую картинку. – OlivierH

Возможный дубликат [Как я могу сделать float top с CSS?] (Http://stackoverflow.com/questions/1847460/how-can-i-make-a-float-top-with-css) – OlivierH

Вы можете вызвать этот яваскрипт функцию после загрузки страницы (<body onload="float_top()">):

var top = 5; // top value for next row 
var margin = 5; // space between rows 
var rows = []; // list of rows 
function float_top() { 
    for (var c = 0; c < document.body.children.length; c++) { 
     var ok = false; 
     var child = document.body.children[c]; 
     var cr = child.getBoundingClientRect(); 
     for (var i = 0; i < rows.length; i++) { 
      if (cr.left > rows[i].right) { 
       rows[i].right = cr.right; 
       child.style.top = rows[i].top + "px"; 
       ok = true; 
       break; 
      } 
      if (cr.right < rows[i].left) { 
       rows[i].left = cr.left; 
       child.style.top = rows[i].top + "px"; 
       ok = true; 
       break; 
      } 
     } 
     if (!ok) { 
      // add new row 
      rows.push({ 
       top: top, 
       right: cr.right, 
       left: cr.left 
      }); 
      child.style.top = top + "px"; 
      top = child.getBoundingClientRect().bottom + margin; 
     } 
    } 
}

Итерирует по div s, отслеживает пространство, используемое каждым div и добавляет «строки», когда нет места для размещения div в существующих строках.

См. Это jsFiddle.

Примечание:

для этой работы, то position из div х должно быть установлено в absolute
в div ы предполагается на ту же высоту. Вы будете нуждаться в некоторой настройке, если это не так.

источник

2013-11-30 11:06:28

Поскольку нет простого решения для CSS, этот способ - это путь! Спасибо! –

Вы можете либо применить float: left к .box класса или установите его значение display в inline-block, если не причина, элементы 2 и 4 в диаграмме должны быть ниже 1, 3 и 5.

Нет float: top, потому что это не обязательно. div s - это block элементов, что означает, что в нормальном потоке документа они отображаются ниже друг друга, в соответствии с их размещением в вашем HTML. Существует гибридное отображаемое значение, о котором я упоминал выше, inline-block, который обладает блочными качествами, но отображает элементы горизонтально.

Если вам требуется, чтобы определенные элементы на вашей странице «плавали» вверх или вниз (в смысле каждого слова в день), вы можете попробовать применить margin-top к элементам, которые должны быть ниже?

источник

2013-11-18 13:17:57

Вы должны использовать float:left; и перестраивать divs

<table><tr> 
    <td><div class="box">1</div></td> 
    <td><div class="box" style="margin-left: 30px;">2</div></td> 
    <td><div class="box" style="margin-left: 90px">4</div></td> 
    <td><div class="box" style="margin-left: 120px">3</div></td> 
    <td><div class="box" style="margin-left: 240px">5</div></td> 
</tr></table> 


    <style> 
    table{width:100%;} 
table td{ 
    height:120px; 
} 
table td:nth-child(1n){ 
    vertical-align:top; 
} 
table td:nth-child(2n){ 
    vertical-align:bottom; 
} 
.box{   
    height: 50px; 
    width: 50px; 
    border: 1px solid black; 
    text-align: center; 
    margin-bottom: 5px; 
} 
    </style>

Пожалуйста, проверьте jsfiddle demo

источник

2013-11-18 13:22:02 Parixit

Пожалуйста, предоставьте код, а не только ссылку на скрипку, чтобы предотвратить будущие неработающие ссылки. – zessx

@zessx Спасибо, что напомнили мне. Я сделал обновление. – Parixit

Это решение работает только при ручной перестановке DIV. В моем примере может быть до ста случайных сгенерированных DIV. –

Как плавать: сверху?

ответ

Смежные вопросы