Question

我有一个容器，里面有很多带渐变背景的正方形，我不能让这些渐变水平显示......我该如何解决？

div.innerContainer {
    padding:5px;

    .purple {
        .size;
        .border-radius;
        .gradient(top, purple,);
    }
    .blue {
        .size;
        .border-radius;
        .gradient(top, blue;);                          
    }
    .green {
        .size;
        .border-radius;
        .gradient(top, green;)                          
    }
    .yellow {
        .size;
        .border-radius;
        .gradient(top, yellow;)
    }
    .orange {
        .size;
        .border-radius;
        .gradient(top, orange;) 
    }
    .red {
        .size;
        .border-radius;
        .gradient(top, red;)
    }
}

这是产生问题的div，这里是完整的代码 - http://jsfiddle.net/T2Xe9/376/。

Answer 1

您的渐变目前从“顶部”开始。而不是这样，要做一个水平渐变，向右或向左移动“向右”或“向左”。

以下是一个例子：

.red {
    .size;
    .border-radius;
    .gradient(to right, red;)
}

Answer 2

只需使用inline-block或在你的样式中使用float属性，如果你在谈论水平显示的渐变，那么更新你的mixin，因为它不灵活。

.gradient(@property, @v, @colour1, @colour2){
    @deg: unit(@v, deg);
    @{property}:-webkit-linear-gradient(@deg , @colour1 , @colour2);
    @{property}:linear-gradient(@deg , @colour1 , @colour2);
}
.box{
    .gradient(background-image, 45, blue 20%, red 100%);
    .gradient(border-image, 45, blue 20%, red 100%);
}

使用LESS在div中水平排列元素

2 个答案: