Php 垂直对齐div'；但保持水平位置不变

从一个数据库中，我提取了一种Div的时间线，有一定的起点和终点。它们有些重叠，有些可以挨着安装。

最终，我希望将它们滑到一起，使其尽可能紧凑，如下所示：

我怀疑如何应对这个挑战：通过服务器端（php）脚本或使用javascript浮动脚本之类的东西。或者完全不同的方法

有人能把我推向正确的方向吗

编辑：： 重要的是，因为这是一个时间线，div的水平位置保持不变。因此，将所有div浮动到左侧或内联阻止它们是没有选项的：）

我的数据库设置：

id | name | start | end  
1  | a    | 2     | 7  
2  | b    | 5     | 10  
etc

---

你试过用CSS内联显示它们吗

div.inline {
    display: inline-block;
}

---

如果您的div具有类

inline

，那么这看起来是一个很好的使用案例：

div.hours {
  position: absolute;
  top: 100px;
  left: 155px;
  width: 100px;
}

当然，用你的值替换100px，155px，100px

---

或者，您可以尝试使用带有位置：相对值和左/宽值的块内条形标记。

要做到这一点并不容易，您需要使用

position:absolute

并计算事件在页面中的可见位置，例如：一整天有

10px高度

和

10px宽度

，我们需要在

第一天添加一个事件

，然后检查

行1是否为空

或有一个事件，如果为空，则

将事件放在那里

，否则

转到下一行并重复
，直到它被分配到一行。
查看
jQuery.Gantt
插件

您需要查看算法，或者自己实现它们（用php或JavaScript），或者尝试找到合适的现成实现

CSS属性和表布局都不能自动完美地解决此问题。
尝试以下方法：

function collides($block1,$block2) {
  return ( ($block1['start'] >= $block2['start']) and ($block1['start'] <  $block2['end']) ) or
         ( ($block1['end']   >  $block2['start']) and ($block1['end']   <= $block2['end']) ) or
         ( ($block1['start'] <= $block2['start']) and ($block1['end']   => $block2['end']) );   
}

function FitsInRow ($row,$block) {
    $fits=true;
    foreach ($row as $block1) 
        if (collides($block,$block1))
            $fits=false;
    return $fits;
}

$rows=array();

// $blocks like that:
$blocks[0]['start']=0;
$blocks[0]['end']=10;
$blocks[0]['name']='A';
$blocks[0]['color']='#F00';

$blocks[1]['start']=5;
$blocks[1]['end']=20;
$blocks[1]['name']='B';
$blocks[1]['color']='#0F0';
//etc


foreach ($blocks as $block) {
    $i=0;
    while (isset($rows[$i]) && !FitsInRow($block,$rows[$i]))
        $i++;
    $rows[$i][]=$block;
}

echo '<div class="block_outer" style="height: '.(count($rows)*20).'px;">';
foreach ($rows as $nr=>$row)
    foreach ($row as $block)
        echo '<div class="block" style="left:'.$block['start'].'px; width:'.($block['end']-$block['start']).'px; top:'.($nr*20).'px; background-color:'.$block['color'].';">'.$block['name'].'</div>';
echo '</div>';

不过我还没有测试过

编辑：我已经更改了名称，使其适合所提到的数据库设置

另一个编辑：现在我添加了外部div，这样内部div的绝对位置就不会破坏页面布局。
查看我的。我想它能满足你的需求，拥有无数的街区。块数据取自HTML表

JS:

var数据=[]，
行=[]，
图表=$（'.wrapper-inner'）；
函数数据项（id、名称、开始、结束）{
this.id=id；
this.name=名称；
this.start=start；
this.end=end；
}
$（'.data tr'）。每个（函数（）{
变量$this=$（this），
item=新数据项（$this.find（'td:eq（0）'））.text（），
$this.find（'td:eq（1）'）.text（），
$this.find（'td:eq（2）'）.text（），
$this.find（'td:eq（3）'）.text（））；
数据推送（项目）；
});
函数addRow（）{
变量行={
el:$（''）。附录（图表），
职位：[]
};
行。推（行）；
}
函数检查行（rowId，item）{
var isrowasilible=true；
对于（变量i=0；i<+item.end-+item.start；i++）{
if（行[rowId]。位置[+item.start+i]）{
isRowAvailible=false；
打破
}
}
返回不可用；
}
函数markRowPositions（rowId，项）{
对于（变量i=0；i

JS-Bin
蓝色分区{
背景色：#a4dcdf；
}
橙色分区{
背景色：#fd9226；
}
格林分区{
背景色：#88b37e；
}
黄色分区{
背景色：#d8d03f；
}
红色分区{
背景色：#c16558；
}
灰色分区{
背景色：#cdcdcd；
}
分区小时数1{
顶部：0px；
左：10px；
宽度：100px；/（110-10）
}
分区小时数2{
顶部：30px；
左：80px；
宽度：50px；
}
分区小时数3{
顶部：60px；
左：120px；
宽度：50px；
}
分区小时数4{
顶部：90px；
左：5px；
宽度：70px；
}
分区小时数5{
顶部：120px；
左：110像素；
宽度：30px；
}
分区小时数6{
顶部：150px；
左：130像素；
宽度：70px；
}
分区时间{
位置：绝对位置；
高度：20px；
颜色：白色；
文本对齐：居中；
边框：白色；
-网络工具包盒阴影：3px 3px 6px 2px rgba（00,00,00,2）；
盒影：3px 3px 6px 2px rgba（00,00,00,2）；
字体：粗体18px Arial，Helvetica，日内瓦，无衬线；
线高：20px；
}
钮扣{
位置：静态；
利润上限：200px；
}
崩溃
.1，
.2，
.3，
重置{
浮动：左；
}
A.
B
C
D
E
F
崩溃
分类
重置
数据1=[
[1, 10, 110],
[2, 80, 130],
[3, 120, 170],
[4, 5, 70],
[5, 110, 140],
[6, 130, 180]
];
//只是添加了控制台输出，不需要
var除数=”；
对于（变量i=0；i<80；i++）{
除法器+=”；
}
控制台日志（分隔器）；
log（“原始数组DATA1:”，DATA1）；
//添加列以跟踪行，以开始将其设置为行1
data1=$.each（data1，函数（索引，值）{
值[3]=0；
});
控制台日志（分隔器）；
log（“添加了列的原始dataA:”，data1）；
函数timelinesort（dataA）{
//创建一个新数组，将元素及其新行号存储在其中
var-dataB=dataA.slice（0,1）；
控制台日志（分隔器）；
log（“使用dataA:，da中的第一个元素初始化了dataB
.block {
  position:absolute;
  height:16px;
  /* ... */
}
.block_outer {
  position:relative;
  width:100%;
  overflow:auto;
}

var data = [],
    rows = [],
    chart = $('.wrapper-inner');


function DataItem(id, name, start, end){
     this.id = id;
     this.name = name;
     this.start = start;
     this.end = end;
}

$('.data tr').each(function() {
    var $this = $(this),
        item = new DataItem( $this.find('td:eq(0)').text(),
                             $this.find('td:eq(1)').text(),
                             $this.find('td:eq(2)').text(),
                             $this.find('td:eq(3)').text() );
        data.push(item);
});

function addRow(){
    var row = {
        el : $('<div class="row"></div>').appendTo(chart),
        positions: []
    };

    rows.push( row );
}

function checkRow(rowId, item){        
    var isRowAvailible = true;

    for (var i = 0; i < +item.end - +item.start; i++){
        if (rows[rowId].positions[+item.start + i]){
            isRowAvailible = false;
            break;
        }
    }

    return isRowAvailible;
}

function markRowPositions(rowId, item){


    for (var i = 0; i < item.end - item.start; i++){
        rows[rowId].positions[+item.start + i] = true;
    }

}

function addItems(){
    for (var i = 0; i < data.length; i++){
        (function(i){
            setTimeout(function() {addItem(data[i])}, 100 * i);
        })(i)
    }
}

function addItem(item){
    var rowToAdd = false,
        itemEl = $('<div class="item"></div>');

    for (var i = 0; i < rows.length; i++){
        if ( checkRow(i, item) ){
            rowToAdd = i;
            break;    
        }
    }

    if (rowToAdd === false){
        addRow();
        rowToAdd = rows.length - 1;
    }

    rows[ rowToAdd ].el.append(itemEl);

        console.log(itemEl.css('opacity'))

    itemEl.css({
        'left': item.start * 30,
        'opacity' : 1,
        'width': ( ( item.end - item.start ) * 30 ) - 2
    });


    markRowPositions(rowToAdd, item);



}

addItems();

<!DOCTYPE html>
<html>
<!--
  Created using jsbin.com
  Source can be edited via http://jsbin.com/udofoq/26/edit
-->
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<style id="jsbin-css">div.blue {
    background-color: #a4dcdf;
}

div.orange {
    background-color: #fd9226;
}

div.green {
    background-color: #88b37e;
}

div.yellow {
    background-color: #d8d03f;
}

div.red {
    background-color: #c16558;
}
div.grey {
    background-color: #cdcdcd;
}
div.hours1{
  top: 0px;
  left: 10px;
  width: 100px;//(110-10)
}
div.hours2{
  top: 30px;
  left: 80px;
  width: 50px;
}
div.hours3{
  top: 60px;
  left: 120px;
  width: 50px;
}

div.hours4{
  top: 90px;
  left: 5px;
  width: 70px;
}

div.hours5{
  top: 120px;
  left: 110px;
  width: 30px;
}
div.hours6{
  top: 150px;
  left: 130px;
  width: 70px;
}
div.hours {
  position: absolute;
  height:20px;
  color: white;
  text-align:center;
  border:white;
  -webkit-box-shadow: 3px 3px 6px 2px rgba(00, 00, 00, .2);
  box-shadow: 3px 3px 6px 2px rgba(00, 00, 00, .2);
  font: bold 18px Arial, Helvetica, Geneva, sans-serif;
  line-height:20px;     
}

button{
    position:static;
    margin-top:200px;
}
.collapse,
.overlap1,
.overlap2,
.overlap3,
reset{
    float:left;
}
</style></head>
<body>
  <div class="hours hours1 orange">A</div>
<div class="hours hours2 yellow">B</div>
<div class="hours hours3 blue">C</div>
<div class="hours hours4 green">D</div>
<div class="hours hours5 red">E</div>
<div class="hours hours6 grey">F</div>
<button class="collapse">collapse</button>
<button class="overlap1">sort</button>
<button class="reset">reset</button>

<script>
data1 = [
  [1, 10, 110],
  [2, 80, 130],
  [3, 120, 170],
  [4, 5, 70],
  [5, 110, 140],
  [6, 130, 180]
];

//just added for console output not needed
var divider="";
for (var i = 0; i < 80; i++) {
  divider += "_";
}

console.log(divider);
console.log("ORIGINAL ARRAY DATA1:", data1);


//add a column to keep track of the row, to start set it to  row 1
data1 = $.each(data1, function(index, value) {
  value[3] = 0;
});

console.log(divider);
console.log("ORIGINAL dataA WITH ADDED COLUMN:", data1);

function timelinesort(dataA){

//make a new Array to store the elements in with their new row number
var dataB = dataA.slice(0, 1);

console.log(divider);
console.log("INITIALIZED dataB WITH FIRST ELEMENT FROM dataA:", dataB);


//initialize the counter
var counter = 0;

console.log(divider);
console.log("INITIALIZED ROUNDS COUNTER:", counter);


dataA = $.map(dataA, function(value1, index1) {

//increment counter with 1 
counter++;

console.log(divider);
console.log("INCREMENTED ROUNDS COUNTER:", counter);


  dataA = $.map(dataA, function(value2, index2) {


    //exclude comparing an element with itself
    if(value2 != dataB[0]) {
      //check to see if elements overlap
      if(value2[2] >= dataB[0][1] && value2[1] <= dataB[0][2]) {
        console.log(divider);
        console.log("Round " + counter  + " from dataA: [" + value2 + "] overlaps with " + dataB[0] + " incrementing row counter with 1");
        //increment the value in column 3 (row counter) of the array
        value2[3]++;
        console.log(divider);
        console.log("Now the dataA has changed to this:", dataA);
        console.log("Meanwhile data1 has changed to this:", data1);
      } else {
        //if no overlap occurs check if the element is not already in the dataB array and if not check if it doesn't overlap with the existing elements
        if($.inArray(value2, dataB) == -1) {
          $.each(dataB, function(index3, value3) {
            if(value3[2] >= value2[1] && value3[1] <= value2[2]) {
              console.log(divider);
              console.log("Round " + counter + " from dataA: [" + value2 + "] overlaps with " + value3 + " incrementing row counter with 1");
              dataB.pop();
              //increment the value in column 3 (row counter) of the array
              value2[3]++;
            } else {
              //if no overlap occurs add the value to dataB
              dataB.push(value2);
              console.log(divider);
              console.log("Added [" + value2 + "] to dataB and now dataB has changed to this: ", dataB);
            }
          });
        } else {
          dataB.push(value2);
          console.log("Added [" + value2 + "] to dataB and now dataB has changed to this: ", dataB);
        }
      }
    }
    return [value2];
  });
  dataA = jQuery.grep(dataA, function(item) {
    return jQuery.inArray(item, dataB) < 0;
  });
  if(dataA.length >= 1) {
    dataB.unshift(dataA[0]);
    dataB = dataB.splice(0, 1);
  } else {
    dataA = [];
  }

});

}
//run the function
timelinesort(data1);

console.log(divider);
console.log("Finally the data1 has changed to this:", data1);


$(".collapse").click(function() {
  $.each(data1, function(index, value) {
    $("div.hours" + (index + 1)).animate({
      "top": 0
    }, "slow");
  });

});

$(".overlap1").click(function() {
  $.each(data1, function(index, value) {
    console.log("div.hours" + (index + 1) + ":" + (value[3]) * 26);
    $("div.hours" + (index + 1)).animate({
      "top": (value[3]) * 26
    }, "slow");
  });

});

$(".reset").click(function() {
  $.each(data1, function(index, value) {
    $("div.hours" + (index + 1)).removeAttr('style');
  });

});
</script>
</body>
</html>

    <div id="divHolder">
    </div>
    <input type="button" onclick="loadChart(json_data1);" value="Load Data 1" />
    <input type="button" onclick="loadChart(json_data2);" value="Load Data 2" />
    <input type="button" onclick="loadChart(json_data3);" value="Load Data 3" />

var json_data1 = '[{"id":1,"name":"A","start":2,"end":7},{"id":2,"name":"B","start":6,"end":9},{"id":3,"name":"C","start":8,"end":12},{"id":4,"name":"D","start":0,"end":5},{"id":5,"name":"E","start":7,"end":9}]';

var json_data2 = '[{"id":1,"name":"A","start":5,"end":7},{"id":2,"name":"B","start":6,"end":9},{"id":3,"name":"C","start":2,"end":6},{"id":4,"name":"D","start":2,"end":12},{"id":5,"name":"E","start":1,"end":9}, {"id":6,"name":"F","start":7,"end":11}, {"id":7,"name":"G","start":8,"end":12}, {"id":8,"name":"H","start":2,"end":4} ]';

var json_data3 = '[{"id":1,"name":"A","start":8,"end":12},{"id":2,"name":"B","start":4,"end":10},{"id":3,"name":"C","start":2,"end":4},{"id":4,"name":"D","start":0,"end":7},{"id":5,"name":"E","start":7,"end":11}, {"id":6,"name":"F","start":5,"end":7}]';

function loadChart(json_data){
    var data = JSON.parse(json_data);
    var divHolder = $('#divHolder');
    var maxWidth = $(document).width() - 200;
    var maxHeight = $(document).height();
    $(divHolder).empty();
    var maxEnd = 0;
    var minStart = 0;
    var widthUnit = 0;
    $(data).each(function(){
        if(this.end > maxEnd)
            maxEnd = this.end;
        if(this.start < minStart)
            minStart = this.start;
    });
    widthUnit = maxWidth / (maxEnd - minStart) ;
    var maxItemUnit = maxEnd;
    var rows = new Array();
    $(data).each(function(){
        var added = false;
        var currentObj = this;
        var i;
        for(i=0;i<rows.length;i++){
            var toAdd = true;
            //if(widthSum> maxItemUnit              
            var widthSum = 0;
            $(rows[i]).each(function(){
                widthSum += this.end - this.start;
                if(this.end < currentObj.start ||  this.start > currentObj.end){
                    if((widthSum + currentObj.end - currentObj.start) < maxItemUnit) 
                        toAdd = true;
                }                               
                else{
                    toAdd=false;
                    return false;
                }
            });
            if(toAdd){
                rows[i].push(currentObj);
                added = true;
                break;
            }
        }
        if(!added){
            rows[i] = new Array();
            rows[i].push(currentObj);
        }
    });

    $(rows).each(function(){
        var current = this;
        var divMain = $('<div></div>').css('display','block').css('width', maxWidth).css('height', 50)
        $(current).each(function(){
            var div = $('<div></div>');
            div.addClass('item').html('<span class="item-content">'+this.name+'</span>');
            var diff = this.end - this.start;
            div.attr('id', this.id).css('opacity','0').css('left', widthUnit * this.start).width(widthUnit * diff);
            if(diff < (maxItemUnit/3))
                div.addClass('small');
            else if (diff < (maxItemUnit/2))
                div.addClass('medium');
            else
                div.addClass('large');
            divMain.append(div);
        });
        $(divHolder).append(divMain);
    });
    var delayVar = 0;
    $(data).each(function(){
        $('#'+this.id).fadeTo(delayVar, 1);
        delayVar += 300;
    });
}

.item{
    display:inline-block;
    position:absolute;
    color: #ffffff;
    border: 1px solid white;
}
.item-content{
    margin-left: 50%;
}
.small{
    background-color:#E66C3D;
}
.medium{
    background-color:#DDD634;
}
.large{
    background-color:#3EC043;
}

DELIMITER $$
CREATE PROCEDURE tileItems ()
BEGIN
DECLARE p_id, p_start, p_end, p_row int;
DECLARE done INT DEFAULT FALSE;
DECLARE cur1 CURSOR FOR SELECT id, start, end FROM tasks order by start, id;
DECLARE CONTINUE HANDLER FOR NOT FOUND SET done = TRUE;

drop temporary table if exists tiles;

create temporary table tiles (
row int(11) NOT NULL,
id int(11) NOT NULL,
end int(11) NOT NULL
);
-- row field will indicates the row number the task should apear
OPEN cur1;
next_task: LOOP

FETCH cur1 into p_id, p_start, p_end;
  IF (done) THEN
    LEAVE next_task;
  END IF;
select min(row) from (select row, max(end) me from tiles t2 group by row) t1 
  where me < p_start
  into p_row;


-- take care of row numbering  
IF (p_row IS NULL) then
  select max(row) from tiles
    into p_row;
    IF (p_row IS NULL) then
      SET p_row = 0;
    END IF;
    SET p_row=p_row+1;
END IF;

insert into tiles (id, row, end)
  values (p_id,p_row,p_end);

END LOOP;

-- CLOSE cur1;
-- here is your output, on the PHP/.Net code you should loop on the row 
select tasks.*, tiles.row from tasks
inner join tiles
 on tasks.id = tiles.id
order by tiles.row, tasks.start;


END $$
DELIMITER ;   

CREATE TABLE `tasks` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `name` varchar(50) COLLATE utf8_unicode_ci NOT NULL,
  `start` int(11) NOT NULL,
  `end` int(11) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=11 ;


INSERT INTO `tasks` (`id`, `name`, `start`, `end`) VALUES
(1, 'A', 2, 6),
(2, 'B', 5, 7),
(3, 'C', 8, 10),
(4, 'D', 1, 5),
(5, 'E', 6, 7);

id  name    start   end row
4   D   1   5   1
5   E   6   7   1
3   C   8   10  1
1   A   2   6   2
2   B   5   7   3