我正在从数据库中提取一种具有特定起点和特定终点的 Div 时间线。其中一些重叠，其中一些可以彼此相邻安装。
最终我想将它们滑动在一起，使其尽可能紧凑，如下所示:
我怀疑如何应对这一挑战:通过服务器端 (php) 脚本或使用一些 javascript float 脚本。 或者当然是完全不同的方法
有人能把我推向正确的方向吗？
编辑:: 重要的是，因为它是一个时间线，所以 div 的水平位置保持不变。因此，将所有 div float 到左侧或内联阻止它们是没有选择的 :)
我的数据库设置:
id | name | start | end
1 | a | 2 | 7
2 | b | 5 | 10
etc
最佳答案
<!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>
我所做的是将所有行折叠到第一行，然后检查哪些行与该行的原始重叠，如果是，则在重叠的行上增加行号，然后转到下一行并重复该过程，直到所有元素整齐地堆叠。
您仍然需要清理 javascript/jquery 的东西并将其放入一个不错的函数中。但作为概念证明，它似乎有效
工作示例:
http://jsbin.com/udofoq/26/watch
或
关于php - 垂直对齐 div 但保持水平位置不变，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13695028/
我使用Nokogiri(Rubygem)css搜索寻找某些在我的html里面。看起来Nokogiri的css搜索不喜欢正则表达式。我想切换到Nokogiri的xpath搜索，因为这似乎支持搜索字符串中的正则表达式。如何在xpath搜索中实现下面提到的(伪)css搜索？require'rubygems'require'nokogiri'value=Nokogiri::HTML.parse(ABBlaCD3"HTML_END#my_blockisgivenmy_bl="1"#my_eqcorrespondstothisregexmy_eq="\/[0-9]+\/"#FIXMEThefoll
我需要一个非常简单的字符串验证器来显示第一个符号与所需格式不对应的位置。我想使用正则表达式，但在这种情况下，我必须找到与表达式相对应的字符串停止的位置，但我找不到可以做到这一点的方法。(这一定是一种相当简单的方法……也许没有？)例如，如果我有正则表达式:/^Q+E+R+$/带字符串:"QQQQEEE2ER"期望的结果应该是7 最佳答案 一个想法:你可以做的是标记你的模式并用可选的嵌套捕获组编写它:^(Q+(E+(R+($)?)?)?)?然后你只需要计算你获得的捕获组的数量就可以知道正则表达式引擎在模式中停止的位置，你可以确定匹配结束
我有一个使用SeleniumWebdriver和Nokogiri的Ruby应用程序。我想选择一个类，然后对于那个类对应的每个div，我想根据div的内容执行一个Action。例如，我正在解析以下页面:https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=puppies这是一个搜索结果页面，我正在寻找描述中包含“Adoption”一词的第一个结果。因此机器人应该寻找带有className:"result"的div，对于每个检查它的.descriptiondiv是否包含单词“adoption
1.upto(9){|x|printx}为什么这行不通？{printx|x}}y呢？ 最佳答案 它用于传递给您的block的参数。即在您的示例中，upto将使用1到9中的每个数字调用您的block，当前值可作为x获得。block参数可以有任何名称，就像方法参数一样。例如1.upto(9){|num|putsnum是有效的。就像一个方法的参数一样，一个block也可以有多个参数。例如hash.each_pair{|key,value|puts"#{key}is#{value}"} 关于ru
我将Cucumber与Ruby结合使用。通过Selenium-Webdriver在Chrome中运行测试时，我想将下载位置更改为测试文件夹而不是用户下载文件夹。我当前的chrome驱动程序是这样设置的:Capybara.default_driver=:seleniumCapybara.register_driver:seleniumdo|app|Capybara::Selenium::Driver.new(app,:browser=>:chrome,desired_capabilities:{'chromeOptions'=>{'args'=>%w{window-size=1920,1
我想在heroku.com上查看我的应用程序日志的内容，所以我关注了thisexcellentadvice并拥有我所有的日志内容。但是我现在很想知道我的日志文件实际在哪里，因为“log/production.log”似乎是空的:C:\>herokuconsoleRubyconsoleforajpbrevx.heroku.com>>files=Dir.glob("*")=>["public","tmp","spec","Rakefile","doc","config.ru","app","config","lib","README","Gemfile.lock","vendor","sc
这应该是一个简单的问题，但我找不到任何相关信息。给定一个Ruby中的正则表达式，对于每个匹配项，我需要检索匹配的模式$1、$2，但我还需要匹配位置。我知道=~运算符为我提供了第一个匹配项的位置，而string.scan(/regex/)为我提供了所有匹配模式。如果可能，我需要在同一步骤中获得两个结果。 最佳答案 MatchDatastring.scan(regex)do$1#Patternatfirstposition$2#Patternatsecondposition$~.offset(1)#Startingandendingpo
我使用“newapp_name”创建了一个新的Rails应用程序，我正在尝试编辑.gitignore文件，但在我的应用程序文件夹中找不到它。我在哪里可以找到它？我安装了Git。 最佳答案 .gitignore位于项目的root中，而不是app子目录中。首先打开终端并进入您的目录。您需要使用ls-a来显示stash文件。然后使用打开.gitignore 关于ruby-on-rails-尝试打开.gitignore以在文本编辑器中对其进行编辑，但在OSXMountainLion上找不到文件位
关闭。这个问题是off-topic.它目前不接受答案。想改进这个问题吗？Updatethequestion所以它是on-topic用于堆栈溢出。关闭11年前。Improvethisquestion我不经常使用ruby-通常它加起来相当于每两个月或更长时间编写一次脚本。我的大部分编程都是使用C++进行的，这与ruby有很大不同。由于我与ruby之间的差距如此之大，我总是忘记语言的基本方面(比如解析文本文件和其他简单的东西)。我想每天练习一些基本的东西，我想知道是否有一些我可以订阅的网站，并且会向我发送当天的Ruby问题或类似的东西。有人知道这样的站点/Internet服务吗？
对于我正在编写的Rails3应用程序，我正在考虑从本地文件系统上的XML、YAML或JSON文件中读取一些配置数据。重点是:我应该把这些文件放在哪里？Rails应用程序中是否有用于存储此类内容的默认位置？附带说明一下，我的应用程序部署在Heroku上。 最佳答案 我经常做的是:如果文件是通用配置文件:我在目录/config中创建一个YAML文件，每个环境有一个上层key如果我为每个环境(大项目)创建一个文件:我为每个环境创建一个YAML并将它们存储在/config/environments/然后我在加载YAML的地方创建了一个初始化