0

私はcssを初めて使用し、1つのボックスの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>

ここで、最小部分は下3分の1、通常部分は中央3分の1、最大部分は上3分の1になります。私は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.valuesli」を親要素にします。次に、最小グラフのピースは下の21pxになります。通常のグラフは中央の21pxになります。グラフの最大部分は上位21ピクセルになります。

次に、下の21px内（たとえば）で、その30％、または50％などを埋めたい場合があります。

セル1：最小グラフピース-赤、下から3番目の通常のグラフピースの全高の21％-白、テキストなし（中央3分の1）最大グラフピース-白、テキストなし（上3分の1）

セル2：最小グラフピース-緑、全高の100％（下3分の1）通常のグラフピース-緑、および全高の46％（中央3分の1）最大グラフピース-白

セル3：最小グラフピース-緑、全高の100％（下3分の1）通常のグラフピース-緑、および全高の100％（中央3分の1）最大グラフピース-緑、および全高の46％身長

つまり、パーセンテージをCSS定義ファイルに入れることはできません。HTMLはパーセンテージを設定できる必要があります。しかし、CSSは、親ボックスの個々の3つの部分に書き込むことを許可する必要があります。

「#nutrients.row.valuesli」を親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 に答える