Question

基本上，我想制作一个＆＃34;色谱＆＃34;我有多个单独的彩色div彼此相邻，每个div都有一个到不同网站的链接。到目前为止，我有这个：

<div style="width:100px;height:500px;background-color:#FF0000"; onclick="location.href='http://www.google.com';" style="cursor: pointer;"</div>

Google只是一个参考网址，我还没有确切的参考网址。

无论如何。

我已经看过SO上的几个主题，并且没有成功找到一种方法将这些div中的6个彼此相邻以便拥有彩虹色彩。我尝试的所有东西都把它们放在它前面。我知道如果它只有6种颜色，它将是一种蹩脚的色谱，但这没关系。

虽然，如果有一种方法可以将div混合在一起（同时仍然保留他们的＆＃34; hitbox＆＃34;转发到链接），以便给它更多的＆＃34; rainbowy＆＃34;感觉，这也会非常有帮助。但让它们整理更重要。现在。

感谢您的帮助！

Answer 1

有两种明显的方法可以实现这一点（没有脚本）。 Live examples here

彩色链接元素：在每个<a href=""></a>上使用单独的颜色，以获得可以点击的块状色谱，从而导致不同的页面。
- 优点：易于编码;用户可以看到已定义的可点击边界。
- 缺点：背景不是很容易定制，除非为每个链接设置不同的样式，这可能不是很平滑（尤其是渐变）
- 结果：
隐藏的链接元素：使用背景元素并覆盖<a href=""></a>标记，让您拥有所需的任何背景。
- 优点：可自定义的背景
- 缺点：如果使用渐变，则难以兼容;您可以管理自己的间距，并且用户看不到定义的可点击边界。
- 结果：

Answer 2

使用float:left;或display:inline-block;将它们显示在一行中，只需确保父容器没有折叠并且足够宽。

您可以使用渐变作为背景颜色将它们混合在一起。

http://www.colorzilla.com/gradient-editor/

懒惰的例子：http://codepen.io/anon/pen/XJZQzq

Answer 3

更新：在看了@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库 - 在您的问题中添加更多详细信息可能有所帮助。

参考文献：

Answer 4

只需使用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%

有多个div彼此相邻

4 个答案: