基本上，我想制作一个“色谱”，其中我有多个彼此相邻的单独彩色 div，每个都有指向不同站点的链接。到目前为止，我有这个：
<div style="width:100px;height:500px;background-color:#FF0000"; onclick="location.href='http://www.google.com';" style="cursor: pointer;"</div>
Google 只是一个参考网址，我还没有确切的网址。
总之，重点。
我查看了 SO 上的几个线程，但未能找到一种方法将其中 6 个 div 彼此相邻放置以形成彩虹般的颜色。我尝试过的所有东西都将它们放在前面的下面。我知道如果它只有 6 种颜色，那将是一个蹩脚的色谱，但没关系。
虽然，如果有一种方法可以将 div 混合在一起（同时仍保留它们的“hitbox”以被转发到链接），以便给它更多“彩虹”的感觉，那将是非常也很有帮助。但让它们井井有条更重要。暂时。
感谢您的帮助！
【问题讨论】：
有两种明显的方法可以实现这一点（无需编写脚本）。 Live examples here
彩色链接元素：在每个<a href=""></a> 上使用单独的颜色以获得可以点击的块状色谱，从而导致不同的页面。
结果：
隐藏链接元素：使用背景元素并叠加<a href=""></a>标签，让你拥有任何你想要的背景。
结果：
【讨论】：
使用 float:left; 或 display:inline-block; 将它们显示在 1 行中，只需确保父容器没有折叠并且足够宽。
您可以使用渐变作为背景颜色将它们混合在一起。
【讨论】：
这里是每个部分的颜色不同的示例。我使用锚标记而不是 div，因为它们是指向其他站点的链接。这是比使用内联 javascript 更好的做法。 http://jsfiddle.net/78x6ub2k/
我的 html 看起来像：
<a href="http://google.com" id="color1" class="color">
</a>
<a href="http://google.com" id="color2" class="color">
</a>
<a href="http://google.com" id="color3" class="color">
</a>
<a href="http://google.com" id="color4" class="color">
</a>
<a href="http://google.com" id="color5" class="color">
</a>
<a href="http://google.com" id="color6" class="color">
</a>
我的 CSS 看起来像：
.color {
display:inline-block;
height: 500px;
width: 100px;
}
#color1{
background: #ff0000;
}
#color2{
background: #ff9000;
}
#color3{
background: #faff00;
}
#color4{
background: #0cff00;
}
#color5{
background: #0019ff;
}
#color6{
background: #7700ff;
}
这是一个颜色一起褪色的示例。我在链接周围添加了一个 div 并给它一个 css 渐变 (http://www.colorzilla.com/gradient-editor/) http://jsfiddle.net/6n4pg254/
我的 html 看起来像：
<div class="colors">
<a href="http://google.com" id="color1" class="color">
</a>
<a href="http://google.com" id="color2" class="color">
</a>
<a href="http://google.com" id="color3" class="color">
</a>
<a href="http://google.com" id="color4" class="color">
</a>
<a href="http://google.com" id="color5" class="color">
</a>
<a href="http://google.com" id="color6" class="color">
</a>
</div>
我的 CSS 看起来像：
.color {
display:inline-block;
height: 500px;
width: 100px;
border: 1px solid #ffffff;
}
.colors {
width:632px;
background: #ff3232; /* Old browsers */
background: -moz-linear-gradient(left, #ff3232 14%, #d87b29 17%, #d87b29 31%, #ede62d 34%, #ede62d 48%, #2ae030 52%, #2ae030 65%, #2e48f4 68%, #2e48f4 83%, #921c96 86%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(14%,#ff3232), color-stop(17%,#d87b29), color-stop(31%,#d87b29), color-stop(34%,#ede62d), color-stop(48%,#ede62d), color-stop(52%,#2ae030), color-stop(65%,#2ae030), color-stop(68%,#2e48f4), color-stop(83%,#2e48f4), color-stop(86%,#921c96)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #ff3232 14%,#d87b29 17%,#d87b29 31%,#ede62d 34%,#ede62d 48%,#2ae030 52%,#2ae030 65%,#2e48f4 68%,#2e48f4 83%,#921c96 86%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #ff3232 14%,#d87b29 17%,#d87b29 31%,#ede62d 34%,#ede62d 48%,#2ae030 52%,#2ae030 65%,#2e48f4 68%,#2e48f4 83%,#921c96 86%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #ff3232 14%,#d87b29 17%,#d87b29 31%,#ede62d 34%,#ede62d 48%,#2ae030 52%,#2ae030 65%,#2e48f4 68%,#2e48f4 83%,#921c96 86%); /* IE10+ */
background: linear-gradient(to right, #ff3232 14%,#d87b29 17%,#d87b29 31%,#ede62d 34%,#ede62d 48%,#2ae030 52%,#2ae030 65%,#2e48f4 68%,#2e48f4 83%,#921c96 86%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3232', endColorstr='#921c96',GradientType=1 ); /* IE6-9 */
}
在任何一种情况下，我都使用属性“display:inline-block”来使元素显示为内联，从而保留大小和其他类似块的特性。你也可以使用 "display:block" 和 "float:left" 让所有项目都向左浮动。虽然如果您不熟悉浮点数的工作原理，这可能会导致一些奇怪的行为。
【讨论】：
更新：查看@pankijs 发布的内容后简化了我的回答 - 谢谢！
您可以使用渐变背景，请看一下这个示例（我只使用了 4 个块，但您可以理解）：
http://jsfiddle.net/r3bk65ys/3/
HTML
<div class="main">
<div><a href="#" class="rainbow one"></a></div>
<div><a href="#" class="rainbow two"></a></div>
<div><a href="#" class="rainbow three"></a></div>
<div><a href="#" class="rainbow four"></a></div>
</div>
CSS
.main div {
float: left;
}
.main .rainbow {
display: inline-block;
height: 50px;
width: 100px;
}
.one {
background: -webkit-linear-gradient(left, red, orange);
background: -o-linear-gradient(right, red, orange);
background: -moz-linear-gradient(right, red, orange);
background: linear-gradient(to right, red , orange);
}
.two {
background: -webkit-linear-gradient(left, orange, yellow);
background: -o-linear-gradient(right, orange, yellow);
background: -moz-linear-gradient(right, orange, yellow);
background: linear-gradient(to right, orange, yellow);
}
.three {
background: -webkit-linear-gradient(left, yellow, green);
background: -o-linear-gradient(right, yellow, green);
background: -moz-linear-gradient(right, yellow, green);
background: linear-gradient(to right, yellow, green);
}
.four {
background: -webkit-linear-gradient(left, green, blue);
background: -o-linear-gradient(right, green, blue);
background: -moz-linear-gradient(right, green, blue);
background: linear-gradient(to right, green, blue);
}
但无论如何，有多种方法可以实现相同的结果，有些可能更适合您的环境/所选的 JavaScript 库 - 为您的问题添加更多细节可能会有所帮助。
参考资料：
【讨论】：
只需使用display:inline-block 将 div 放在同一行。
<div style="width:100px;height:500px;background-color:#FF0000;display:inline-block"; onclick="location.href='http://www.google.com';" style="cursor: pointer;"</div>
您可能需要调整宽度以使 div 适合一行。
您可以使用% 宽度以获得最佳拟合。
在 7 色彩虹中： 100 / 7 = ~14.3。所以只需将每个 div 设置为 width:14.3%
【讨论】：