-1

例 1 と例 2 があります。例 2 は正しい例 2 列で、例 1 のボールが間違った場所に現れ始め、最初のボールの前に無駄なスペースがあります。グリーンボールの量はランダムに変化します。ボールが 1 行にある場合は失敗し、ボールが 2 行にある場合は機能します...結果フィールドと JavaScript フィールドの間の境界線が移動され、例 2 が 1 行になると失敗します。したがって、これらのボールが 2 行の場合と同様に、黒い境界線の先頭から 1 行で開始する必要があります。また、「例」のテキストは、例にある正確な位置にとどまる必要があります。

また、列の最後のボールの直後にブラック ボックスが終了するようになれば素晴らしいと思います。これで、ほぼボールの長さの無駄なスペースができます。

例は次のとおりです。http://jsfiddle.net/xCG72/

HTML

<div class="kontti">
    <span class="tekstinpaikka">Example 1</span>
    <div class="teesi">
        <div class="kori"><div class="nnumero">134234</div></div>
        <div class="kori"><div class="nnumero">2</div></div>
    </div>
</div>

<div class="kontti">
    <span class="tekstinpaikka">Example 2</span>
    <div class="teesi">
        <div class="kori"><div class="nnumero">10</div></div>
        <div class="kori"><div class="nnumero">20</div></div>
        <div class="kori"><div class="nnumero">30</div></div>
        <div class="kori"><div class="nnumero">40</div></div>
        <div class="kori"><div class="nnumero">10</div></div>
        <div class="kori"><div class="nnumero">20</div></div>
        <div class="kori"><div class="nnumero">30</div></div>
        <div class="kori"><div class="nnumero">40</div></div>
        <div class="kori"><div class="nnumero">10</div></div>
        <div class="kori"><div class="nnumero">20</div></div>
        <div class="kori"><div class="nnumero">30</div></div>
        <div class="kori"><div class="nnumero">40</div></div>
    </div>
</div>

CSS

.nnumero {
    background-color: #37A047;
    height:35px;
    width:auto;
    -moz-border-radius:100px;
    -webkit-border-radius:100px;
    border-radius: 100px;

    border:2px;
    border-style:solid;
    border-color:#FFF;
    float:left;
    margin-right:auto;

    text-align:center;
    color:white;
    line-height: 35px;
    font-weight: bold;
    font-size: 30px;
    font-family: sans-serif;

    padding-top:10px;
    padding-bottom:10px;
    padding-right:10px;
    padding-left:10px;
}

.teesi {
    position:relative;
    float:left;
    top:-10px;
    width:auto;
    overflow: hidden;

    border:2px;
    border-style:solid;
    border-color:purple;
}

.kontti {
    -moz-border-radius:9px;
    -webkit-border-radius:9px;
    border-radius:9px;  
    border:2px;
    border-style:solid;
    border-color:black;
    float:left;
    width:auto;

    margin-top:8px;
    margin-bottom:5px;
    margin-right:5px;
    margin-left:5px;

    padding-top:20px;
    padding-right:5px;
    padding-left:5px;
    padding-bottom:1px;
}

.tekstinpaikka {
    position:relative;
    left:15px;
    top:-40px;
    width:auto;
    float:left;
    z-index:10;
    border:2px;
    border-style:solid;
    border-color:yellow;

    background-color: #CCC;
    text-align:left;
    color:black;

    line-height: 16px;
    font-weight: bold;
    font-size: 16px;
    font-family: sans-serif;
}

.kori {
    width:auto;
    position:relative;
    float:left;
    overflow:visible;
    border:2px;
    border-style:solid;
    border-color:green;

    padding-top:3px;
    padding-bottom:3px;
    padding-right:5px;
    padding-left:5px;

    margin-top:2px;
    margin-bottom:2px;
    margin-right:2px;
    margin-left:2px;
}
4

1 に答える 1

0

1行での左マージンの動作については、テキストの「例」が間違っています。

CSS クラス .tekstinpaikka を更新します。

.tekstinpaikka {
    position:absolute; /*MODIFIED*/
    left:15px;
    margin-top:-40px;/* MODIFIED PREVIOUSLY WAS TOP¨:*/
    width:auto;
    float:left; /*DELETED*/
    z-index:10;
    border:2px;
    border-style:solid;
    border-color:yellow;
    background-color: #CCC;
    text-align:left;
    color:black;
    line-height: 16px;
    font-weight: bold;
    font-size: 16px;
    font-family: sans-serif;
}

フィドル

于 2013-10-11T09:21:20.087 に答える