我是css的新手并试图在一个盒子的3个独立部分中绘制。该框在CSS中定义如下：
#nutrients .row .values li {
position:relative;
float:left;
width:29px;
height:63px;
border-right:1px solid #C9C3BA;
list-style-type:none;
}
我希望能够做到这一点：
<li><span class="min_graph" style="background:green" height="32%">
<span class="normal_graph" style="background:red" height="22%">
</li>
其中min部分是底部三分之一，正常部分是中间三分之一，最大部分是前三分之一。 我在CSS中试过这个：
#nutrients .row .values li span .min_graph {
vertical-align:bottom;
}
#nutrients .row .values li span .normal_graph {
}
#nutrients .row .values li span .max_graph {
vertical-align:top;
}
但显然我不明白如何专注于盒子的3个不同部分。 感谢...
======
非常感谢所有的帮助！我没有解释得这么好。 我确实想用div。基本上有3个子框，下部（最小），中间（正常）和顶部（最大）。 我希望“#nutrients .row .values li”成为父元素。 然后，最小图形片段将是底部21px;正常图表是中间的21px;并且最大图形片段将是前21px。
然后，在底部21px（例如）中，我可能想要填充30％，或50％，等等。
单元格1： min graph piece - 红色，底部三分之一的全高度的21％ 普通图片 - 白色，没有文字（中间三分之一） 最大图形片 - 白色，没有文字（前三分之一）
单元格2： 最小图片 - 绿色，其全高度的100％（底部三分之一） 正常图形片 - 绿色，全高度的46％（中间三分之一） 最大图片 - 白色
小组3： 最小图片 - 绿色，其全高度的100％（底部三分之一） 正常图形片 - 绿色，100％全高（中间三分之一） 最大图形片 - 绿色，全高度的46％
换句话说，百分比无法进入CSS定义文件。 HTML必须能够设置百分比。 但CSS确实需要允许我写入父盒子的三个部分。
我需要了解如何将“#nutrients .row .values li”变成父div。
答案 0 :(得分：1)
理想情况下，您可能希望使用<div>元素来完成此操作，因为<span>元素在此处未达到预期目的。我将完成这两种方式。
<div>实施： <强> CSS：
/* To use %-based heights, the parent element must have a defined height */
.values { height: 500px; width: 100%;}
.min_graph { background:green; height: 32%;}
.normal_graph { background:red; height: 22%;}
.max_graph { background:yellow; height: 22%;}
<强> HTML：
<div class='values'>
<div class="min_graph">TEST</div>
<div class="normal_graph">TEST</div>
<div class="max_graph" >TEST</div>
</div>
<强> Example
<span>实施 首先 - 您需要确保关闭<span>元素，并且需要使用display: block来确保它们可见，如下所示：
<强> CSS
#nutrients .row. values li span
{
height: auto;
width: 100%;
display: block;
}
<强> HTML：
<li>
<span class="min_graph" style="background:green; height:32%">Test</span>
<span class="normal_graph" style="background:red; height:22%">Test</span>
<span class="max_graph" style="background:yellow; height:22%">Test</span>
</li>
<强> Example
答案 1 :(得分：0)
您可以使用css渐变为不同的部分着色：
我使用过这个网站：http://www.colorzilla.com/gradient-editor/
产生这个：
background: -moz-linear-gradient(top, #ff3232 0%, #ff3030 33%, #f9f227 33%, #f5f900 66%, #00ff00 66%, #00ff00 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3232), color-stop(33%,#ff3030), color-stop(33%,#f9f227), color-stop(66%,#f5f900), color-stop(66%,#00ff00), color-stop(100%,#00ff00)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ff3232 0%,#ff3030 33%,#f9f227 33%,#f5f900 66%,#00ff00 66%,#00ff00 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ff3232 0%,#ff3030 33%,#f9f227 33%,#f5f900 66%,#00ff00 66%,#00ff00 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ff3232 0%,#ff3030 33%,#f9f227 33%,#f5f900 66%,#00ff00 66%,#00ff00 100%); /* IE10+ */
background: linear-gradient(to bottom, #ff3232 0%,#ff3030 33%,#f9f227 33%,#f5f900 66%,#00ff00 66%,#00ff00 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3232', endColorstr='#00ff00',GradientType=0 ); /* IE6-9 */
哦，但除非它已被更改，否则我认为Safari的iPad版本不接受百分比渐变，只接受像素数，因此您可能需要根据目标用户进行调整
答案 2 :(得分：0)
使用您的示例查看This JSFiddle。你<li>内的div是要走的路，因为div是一个块级元素，可以更好地满足你的需求。您可以定义一个父元素，在本例中为<li>，其中包含您希望整个事物的宽度和高度。然后，只需要定义每个<div>的大小和颜色。
<ul id="boxes">
<li>
<div id="top">Div 1</div>
<div id="mid">Div 2</div>
<div id="bottom">Div 3</div>
</li>
</ul>
#boxes li {
position:relative;
float:left;
width:29px;
height:63px;
border-right:1px solid #C9C3BA;
list-style-type:none;
}
#top {height:auto}
#mid {background:red; height: 32%}
#bottom {background:green; height:22%;}
答案 3 :(得分：0)
我认为您可以通过颜色序列或渐变（如 Robot Woods 所述）更轻松地实现您想要的效果。我发现一个很好的参考是 https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient()#gradient_with_multi-position_color_stops
body {
background: linear-gradient(to right,
red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%);
}