-1

有示例 1 和示例 2。示例 2 在两排中是正确的，示例 1 的球开始出现在错误的位置，在第一个球之前有浪费的空间。绿球的数量随机变化。如果它在单行中有球，它会失败，如果它在两行中有球，它会工作......如果结果和 javascript 字段之间的边界被移动，以便示例 2 变为单行，它会失败。所以我需要让这些球从黑色边框的开头开始也排成一排，就像它排成两排一样。“示例”文本也需要保持在示例中的确切位置。

如果黑匣子在最后一个球之后立即结束，那就太好了，现在几乎可以浪费空间的球长度。

以下是示例：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

对于您在单行上的左边距行为，这是您的文本“示例”错误。

更新您的 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 回答