怎样快速等高线赋值_快速提示：解决等高色谱柱难题

怎样快速等高线赋值

从我们从基于表的设计时代进入CSS时代以来，Web设计中就存在一个熟悉的问题，那就是：

灵活的多列布局中如何有100％高的背景？

有一些解决此难题的方法。 但是，如果您需要，我们将要介绍的那一项可能适合您的项目：

1. 背景图像，边框，CSS3效果等已应用于您的列
2. 三列以上
3. 灵活的高度和宽度列

一种选择是从Envato Studio订购一种快速，高效的网站定制服务 。 您可以从各种经验丰富的提供商中进行选择，查看他们的评论，然后向他们发送所需的确切修改的详细信息。

否则，让我们快速看一下问题。

默认列背景行为

下图是一个简单的三列布局，使用了将每一列向左浮动的标准方法。 在以默认方式应用背景的情况下，各列将根据其内容的高度进行调整，如下所示：

这是功能性的，但是由于高度的显着差异，并不是最令人愉悦的布局。

上面HTML在包装器中放置了三个“列内容”元素：

<div class="wrap">
    <div class="content">...</div>
    <div class="sidebar">...</div>
    <div class="sidebar_two">...</div>
</div>

这些“列内容”元素CSS为：

.content {
    width:60%;
    float:left;
    padding: 20px 30px;
    background: #fff;
    color: #6d7072;
}
.sidebar {
    width:20%;
    float:left;
    padding: 20px 30px;
    background: #5f6673;
    color: #ebeef3;
    font-size: 90%;
}
.sidebar_two {
    width:20%;
    float:left;
    padding: 20px 30px;
    background: #434750;
    color: #ebeef3;
    font-size: 90%;
}

解决方案：救援的伪元素

当我们引用等高列时，我们通常希望满足两个条件：

1. 使列高灵活地适合其中的内容量。
2. 设置统一的背景高度，与每列中的内容量无关。

在上面的示例中，我们已经满足了柔性高度的第一个条件。 但是，背景样式和灵活的高度规则都是同一类的一部分，应用于相同的元素。 无论该元素遵循的高度规则如何，背景也会遵循它们。

因此，如果我们希望背景具有不同的高度设置，我们将需要单独的元素，我们可以将背景样式与其自身的高度规则集一起应用。 为了创建这些单独的元素而不添加任何额外的标记，我们将使用伪元素 。

对于每一列，我们将使用:before伪选择器生成一个单独的伪元素，并对其应用背景样式。 然后，我们将结合使用绝对定位和z-index将这些背景放在每列内容的后面，并将它们设置为统一的高度。

每列的新CSS变为：

.content, .content:before {
    width:60%;
}
.content {
    float:left;
    padding: 20px 30px;
    color: #6d7072;
}
.content:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: -1;
    left: 0;
    background: #fff;
}

.sidebar, .sidebar:before {
    width:20%;
}
.sidebar {
    float:left;
    padding: 20px 30px;
    color: #ebeef3;
    font-size: 90%;
}
.sidebar:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: -1;
    left: 60%;
    background-color: #5f6673;
}

.sidebar_two, .sidebar_two:before {
    width:20%;
}
.sidebar_two {
    float:left;
    padding: 20px 30px;
    color: #ebeef3;
    font-size: 90%;
}
.sidebar_two:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: -1;
    left: 80%;
    background-color: #434750;
}

这使我们可以呈现出甚至均匀的列高：

怎么做的

简而言之，我们在这里所做的就是将“背景保持器”伪元素绝对定位在常规“列内容”元素之后，以创建背景样式。

因为这些“背景保持器”伪元素是绝对放置的，所以我们可以准确告诉它们外部边缘的位置，同时仍然允许“列含量”元素为所需的任何高度或宽度。

重要：   您的列应位于设置为position: relative;的父包装器（本例中为.wrap ）内position: relative; 为了使绝对定位起作用。 这应该在浮动列之后清除，以确保其接收到要延伸到的背景的高度值。

津贴和替代方法

有几种很棒的方法建议使用其他方法来解决此问题。 如果您不需要这种方法的特殊好处，则可以选择以下解决方案之一。

平面色彩与背景图片和额外效果

如果您打算在背景中仅使用纯色，那么一个非常聪明的解决方案是应用水平CSS渐变，创建颜色带以与列对齐。 感谢Chris Coyier， 看看如何 。

但是，如果您的设计需要将图像，边框，CSS3效果等应用于背景，则我们的“背景支架” div技术可能更合适，例如

少于或多于三列

另一个很酷的解决方案是在列的父包装器上使用伪选择器:before和:after最多创建三列具有相等高度背景的列。 您可以阅读Nicolas Gallagher解释的有关此技术的内容。

另一方面，如果您需要三列以上，则可能要使用我们的“背景支架”技术，因为您可以根据需要拥有任意多的列。 例如

结论

一旦我们看到浏览器对flexbox的广泛支持， 它就可以很直接地进行这样的事情而无需依赖伪元素。

但是，从现在到现在，这是完成工作的好方法。 它使您可以为响应式布局保留灵活的宽度，使用任意多的列并应用任何类型的背景样式。

翻译自: https://webdesign.tutsplus.com/tutorials/quick-tip-solving-the-equal-height-column-conundrum--cms-20403

怎样快速等高线赋值