Question

有实施例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;
}

Answer 1

对于您在单行上的左边距行为，它是您的文字＆＃34;例如＆＃34; falty。

更新你的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;
}

<强> FIDDLE

用css证明div的未知行为

1 个答案: