Question

如何根据列数将备用背景颜色应用于多列布局。

在上面的链接中，如果你看到所有的列背景都是蓝色的，我想给出白色＆amp;的备用背景颜色。蓝色

HTML

<div class="container" id="container">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus aliquam commodo vestibulum. Duis in risus auctor, posuere elit a, interdum nunc. Vivamus nisl velit, vehicula ut ornare ac, mollis sit amet lectus. Praesent volutpat erat sem, id accumsan arcu tempor et. Quisque elementum leo sed elit volutpat, cursus dapibus lorem bibendum. Vivamus porta, elit sed facilisis tincidunt, enim diam suscipit metus, sit amet tincidunt ipsum augue id erat. Duis eget mi enim. Donec volutpat metus ut lacus iaculis cursus et eleifend orci. Vestibulum sollicitudin nibh sit amet laoreet dignissim. Pellentesque vulputate, leo eu commodo imperdiet, felis ante faucibus mi, vitae bibendum velit ipsum id arcu. Praesent a rhoncus quam, vel viverra elit. Nullam tellus velit, porta eu interdum quis, porttitor sed elit. Pellentesque egestas nisi odio, eget placerat nibh rhoncus id.</p>  
    <p>Vestibulum ante risus, placerat at egestas sit amet, interdum rhoncus leo. Donec libero nunc, aliquam aliquet massa non, fringilla consectetur est. Proin sodales vehicula ante pretium mollis. Proin laoreet vel dui a elementum. Pellentesque et ante odio. Cras commodo nisi sit amet mi pharetra, quis rhoncus tortor sodales. Etiam rhoncus orci nibh, id tincidunt nisi semper non. Quisque a imperdiet purus. Maecenas malesuada quis libero eu viverra. Proin eu diam accumsan, rutrum turpis eget, fermentum diam. Integer sem enim, hendrerit rhoncus suscipit sit amet, rutrum id lectus.</p>
    <p>Suspendisse potenti. In hac habitasse platea dictumst. Suspendisse potenti. Phasellus leo tortor, vestibulum vel odio sed, tincidunt dictum urna. Ut ullamcorper lobortis lacus, at tristique massa posuere vel. Proin aliquam quam tellus, elementum suscipit mauris elementum nec. Proin aliquet quam ligula, sed vulputate nisl sodales sed. Sed erat turpis, iaculis ac nulla eu, dapibus adipiscing elit. Fusce adipiscing nunc mi, ac tempus nunc interdum gravida.</p>
</div>

CSS

.container {
    background-color: blue

    color:#000;
    margin:20px auto;
    padding:20px;
    position:relative;
    width:800px;
    border-radius:5px;
    box-shadow:1px 1px 5px #111111;

    /* column specific styling */
    column-count: 3;
    column-gap: 3em;
    column-rule: 1px dashed black;
}

Answer 1

这是一个严重的黑客，但只要你有一个固定宽度的容器，它应该做你需要的。

enter image description here

我没有时间摆弄宽度，但如果你花时间，你“理所当然”可以使用带有硬边的gradient来达到理想的效果。如果您使用虚线column-rule隐藏/混淆容器之间的模糊线条，它也会有所帮助。

http://jsfiddle.net/r8G2X/2/

.container {
    background-image: -webkit-gradient(
        linear,
        right top,
        left top,
        color-stop(0.67, #324FA2),
        color-stop(0.66, #51C26F),
        color-stop(0.33, #7091EA),
        color-stop(0.34, #51C26F)
    );

    color:#000;
    margin:20px auto;
    padding:20px;
    position:relative;
    width:800px;
    box-shadow:1px 1px 5px #111111;

            border-radius:5px;
       -moz-border-radius:5px;
    -webkit-border-radius:5px;

            column-count: 3;
       -moz-column-count: 3;
    -webkit-column-count: 3;

            column-gap: 3em;
       -moz-column-gap: 3em;
    -webkit-column-gap: 3em;

            column-rule: 1px dashed black;
       -moz-column-rule: 1px dashed black;
    -webkit-column-rule: 1px dashed black;
}

Answer 2

编辑：那么，你有很多div /列，你希望每一个都是不同的颜色？

为元素分配一个类，并使用类似于下面的内容。然后，您只需为每个其他元素指定决定颜色的类

 <div id="white">some stuff</div>
    <div id="black">some other stuff</div>

CSS:

#white{
background:white;
}
#black{
background:black;
}

这是你的意思吗？ div是一种颜色，另一种是不同的东西，或者你的意思是什么？

Answer 3

这可能不适用于您的特定情况，但您会考虑在容器后面应用背景图像吗？对于三列布局，背景图像将包含三个颜色带（原色，备用颜色，原色）等。对于不同数量的列，您将使用不同的背景图像。然后只需在contains上使用一个类来指定应该加载哪个类。要保持图像尺寸不变并适应任何高度的列，请使用垂直重复的背景图像。

这假设您当然知道每列的宽度，因此对于响应式网站可能无效。但是，至少在纸面上，我认为这样可行......

如何为CSS列中的每列应用备用背景颜色

3 个答案: