Html 让多个div相邻

基本上，我想制作一个彩色光谱，其中我有多个单独的彩色div，每个div相邻，每个div都有一个指向不同站点的链接。到目前为止，我有：

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

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

不管怎么说，说到点子上了

我已经在SO上查看了几个线程，但没有找到一种方法将其中6个div彼此相邻，以获得彩虹般的颜色。我试过的每一件事都让他们在前面一件的下面。我知道如果它只有6种颜色，那将是一个蹩脚的光谱，但那没关系

尽管如此，如果有一种方法可以将两位女主角混合在一起，同时仍然保留他们的hitbox，以便转发到一个链接，从而给人一种彩虹般的感觉，那也会很有帮助。但把它们整理好更重要。现在

谢谢你的帮助

使用float：左；或显示：内联块；要在一行中显示它们，只需确保父容器没有折叠并且足够宽

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

惰性示例：

只需使用display:inline块将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适合一行。 您可以使用%宽度以获得最佳匹配

---

七色彩虹：100/7=~14.3。因此，只需将每个div设置为width:14.3%

这里有一个示例，说明每个部分都是不同的颜色。我使用锚定标签而不是div，因为它们是指向其他站点的链接。这是一种比使用内联javascript更好的实践。

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

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

.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 */
}

下面是一个颜色一起褪色的示例。我在链接周围添加了一个div，并给它一个css渐变

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

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

.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块使元素显示为内联，并保留大小和其他类似块的特征。还可以使用display:block和float:left使所有项目向左浮动。不过，如果您不熟悉浮动的工作方式，这可能会导致一些奇怪的行为。

更新：查看@pankijs发布的内容后，简化了我的回答-谢谢

您可以使用渐变背景，请看一下这个示例，我只使用了4个块，但您可以得到以下想法：

HTML

但无论如何，有多种方法可以获得相同的结果，其中一些方法可能更适合您选择的环境/JavaScript库-为您的问题添加更多细节可能会有所帮助

参考资料：

---

有两种明显的方法可以在不编写脚本的情况下实现这一点

彩色链接元素：在每个元素上使用单独的颜色，以获得一个块状的颜色光谱，可以单击该光谱，从而生成不同的页面

优点：易于编码；用户可以看到定义的可单击边界。 缺点：背景不是很可定制，除非为每个链接设置不同的样式，这可能不是很平滑，尤其是渐变 结果:

隐藏链接元素：使用背景元素和覆盖标记，让您拥有所需的任何背景

优点：可定制的背景 缺点：如果使用渐变，兼容性很难；您可以管理自己的间距，用户看不到定义的可单击边界。 结果:

---

所以我试用了你的第二个版本，把它们混合在一起，看起来棒极了！唯一的问题是，我不能让它显示在Weebly网站上。我尝试将CSS粘贴到网站CSS的底部，在它自己的部分下，但是当我将html放入嵌入代码工具时，它只是显示为空白。我不知道你是否熟悉Weebly，但有没有一种方法可以将CSS放入html代码本身，并将所有内容作为一个代码？等等，别担心。我意识到我忘了关闭标题，所以它认为整个CSS是一个标题。嘿嘿。。。还有一件事。你能把坡度调大一点吗？我只是想让它看起来更流畅一点。抱歉这么多评论。是否有一种简单的方法可以将鼠标悬停文本添加到每种颜色？谢谢你的帮助！下面是一个例子：。可以在链接内添加跨距，然后使用：hover伪选择器更改悬停时跨距的不透明度。