0

我是 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>

其中最小部分将是底部三分之一，正常部分将是中间三分之一，最大部分将是顶部三分之一。我在 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 个子框，下部 (min)、中间 (normal) 和顶部 (max)。我希望“#nutrients .row .values li”成为父元素。然后，最小图形块将是底部 21px；正常图将是中间 21px；并且最大图形块将是前 21px。

然后，在底部 21px 内（例如），我可能想要填充 30% 或 50% 等。

单元格 1：最小图形块 - 红色，其底部三分之一正常图形块全高的 21% - 白色，无文本（中间三分之一） 最大图形块 - 白色，无文本（顶部三分之一）

单元格 2：最小图形块 - 绿色，100% 的全高（底部三分之一）正常图形块 - 绿色，以及 46% 的全高（中间三分之一）最大图形块 - 白色

单元格 3：最小图形块 - 绿色，100% 的全高（底部三分之一）正常图形块 - 绿色，100% 的全高（中间三分之一）最大图形块 - 绿色，46% 的全高高度

换句话说，百分比不能进入 CSS 定义文件。HTML 必须能够设置百分比。但是 CSS 确实需要允许我写入父框的三个部分。

我需要了解如何将“#nutrients .row .values li”制作成父 div。

4

4 回答 4

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>

例子

<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>

例子

于 2013-01-02T15:39:00.967 回答
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 */

哦，但是除非它被更改，否则我认为 iPad 版本的 Safari 不接受百分比渐变，只接受像素计数，因此您可能需要根据目标用户进行调整

于 2013-01-02T15:39:22.707 回答
0

用您的示例查看此 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%;}
于 2013-01-02T15:43:37.093 回答
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%);
}
于 2021-04-02T17:07:04.633 回答