本質(zhì)上，我想做一個(gè)& quot色譜& quot我有多個(gè)單獨(dú)的彩色div，每個(gè)div都有一個(gè)不同站點(diǎn)的鏈接。到目前為止，我有這個(gè):

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

谷歌只是一個(gè)參考網(wǎng)址，我還沒(méi)有確切的。

不管怎樣，說(shuō)重點(diǎn)吧。

我看了SO上的幾個(gè)線程，沒(méi)有成功地找到一種方法將這些div中的6個(gè)放在一起，以形成彩虹的顏色。我嘗試過(guò)的每一件事都把它們壓在前面那件事的下面。我知道如果它只有6種顏色，它將是一個(gè)蹩腳的色譜，但這沒(méi)關(guān)系。

雖然，如果有一種方法可以將div融合在一起(同時(shí)仍然保留它們的& quothitbox & quot被轉(zhuǎn)發(fā)到一個(gè)鏈接)以便給它多一點(diǎn)& quotrainbowy & quot感覺(jué)，那也會(huì)很有幫助。但是讓它們有序更重要。暫時(shí)如此。

有兩種明顯的方法可以實(shí)現(xiàn)這一點(diǎn)(無(wú)需腳本)。這里是活生生的例子

彩色鏈接元素:在每個(gè)& lta href = " " & gt& lt/a & gt；以獲得可以點(diǎn)擊的塊狀色譜，導(dǎo)致不同的頁(yè)面。

優(yōu)點(diǎn):易于編碼；用戶(hù)看到定義的可點(diǎn)擊邊界。 缺點(diǎn):背景不是很可定制，除非為每個(gè)鏈接設(shè)置不同的風(fēng)格，這可能不是很流暢(特別是。對(duì)于漸變) 結(jié)果:

隱藏鏈接元素:使用背景元素并覆蓋& lta href = " " & gt& lt/a & gt；標(biāo)簽，讓你有任何你想要的背景。

優(yōu)點(diǎn):可定制的背景 缺點(diǎn):如果使用漸變，兼容性很難；您可以管理自己的間距，用戶(hù)看不到已定義的可點(diǎn)擊邊界。 結(jié)果:

使用float:left；或者顯示:inline-block；要在一行中顯示它們，只需確保父容器沒(méi)有折疊并且足夠?qū)挕?/p>

你可以用漸變作為背景色，把它們?nèi)诤显谝黄稹?/p>

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

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

這里有一個(gè)例子，每個(gè)部分是不同的顏色。我用錨標(biāo)簽代替div，因?yàn)樗鼈兪瞧渌W(wǎng)站的鏈接。這比使用內(nèi)聯(lián)javascript更好。 http://jsfiddle.net/78x6ub2k/

我的html看起來(lái)像:

<a  id="color1" class="color">
</a>
<a  id="color2" class="color">
</a>
<a  id="color3" class="color">
</a>
<a  id="color4" class="color">
</a>
<a  id="color5" class="color">
</a>
<a  id="color6" class="color">
</a>

我的css看起來(lái)像:

.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;
}

這是一個(gè)顏色一起褪色的例子。我在鏈接周?chē)砑恿艘粋€(gè)div，并給它一個(gè)css漸變(http://www.colorzilla.com/gradient-editor/) http://jsfiddle.net/6n4pg254/

我的html看起來(lái)像:

<div class="colors">
    <a  id="color1" class="color">
    </a>
    <a  id="color2" class="color">
    </a>
    <a  id="color3" class="color">
    </a>
    <a  id="color4" class="color">
    </a>
    <a  id="color5" class="color">
    </a>
    <a  id="color6" class="color">
    </a>
</div>

我的CSS看起來(lái)像:

.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”來(lái)使元素內(nèi)聯(lián)顯示，同時(shí)保留大小和其他類(lèi)似塊的特征。你也可以使用“display:block”和“float:left”讓所有的項(xiàng)目都向左浮動(dòng)。但是如果你不熟悉浮動(dòng)是如何工作的，這可能會(huì)導(dǎo)致一些奇怪的行為。

更新:看了@pankijs發(fā)的東西后簡(jiǎn)化了我的回答——謝謝！

你可以使用漸變背景，請(qǐng)看看這個(gè)例子(我只用了4塊，但你可以得到的想法):

http://jsfiddle.net/r3bk65ys/3/

超文本標(biāo)記語(yǔ)言

<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>

半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)

.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); 
}

但是無(wú)論如何，有多種方法可以達(dá)到相同的結(jié)果，有些方法可能更適合您的環(huán)境/ JavaScript庫(kù)——為您的問(wèn)題添加更多細(xì)節(jié)可能會(huì)有所幫助。

參考資料:

漸變背景 CSS3漸變 只需使用display:inline-block將div放在同一行上。

<div style="width:100px;height:500px;background-color:#FF0000;display:inline-block"; onclick="location. style="cursor: pointer;"</div>

您可能需要調(diào)整寬度，使div適合一行。 您可以使用%寬度來(lái)獲得最佳效果。

在七色彩虹中:100 / 7 = ~14.3。所以只需設(shè)置每個(gè)分區(qū)的寬度:14.3%