1

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

在此处输入图像描述

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

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

3 回答 3

1

这是一个 SERIOUS HACK，但只要你有一个固定宽度的容器，它就可以满足你的需要。

在此处输入图像描述

我没有时间摆弄宽度，但如果你花时间，理论上你“可以”使用gradient带有硬边的 a​​ 来达到预期的效果。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;
}
于 2013-07-24T23:34:57.197 回答
0

编辑：那么，您有许多 div / 列，并且您希望其他每个列都具有不同的颜色？

为元素分配一个类并使用类似于我在下面放置的内容。然后，您只需为所有其他元素指定指定颜色的类 

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

CSS:

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

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

于 2013-07-24T22:45:30.657 回答
0

这可能不适用于您的特定情况，但您会考虑在容器后面应用背景图像吗？对于三列布局，背景图像将由三个颜色带（原色、替代颜色、原色）等组成。对于不同数量的列，您将使用不同的背景图像。然后只需使用包含的类来指定应加载的类。要减小图像大小并适应任何高度的列，请使用垂直重复的背景图像。

这假设您当然知道每列的宽度，因此对于响应式网站可能无法正常工作。但是，至少在纸面上，我认为这是可行的……</p>

于 2013-07-24T23:17:40.950 回答