问一个HTML的Visual formatting model问题

lingyue1012 2014-11-22 09:42:34

<body>

    <span class="rolling_number">

        <span class="a2">

            <div class="num-line" style="top:-18px">

                <span>0</span>

                <span>1</span>

                <span>2</span>

                <span>3</span>

                <span>4</span>

                <span>5</span>

                <span>6</span>

                <span>7</span>

                <span>8</span>

                <span>9</span>

            </div>

        </span>

        <span class="a2">

            <div class="num-line" style="top:-36px">

                <span>0</span>

                <span>1</span>

                <span>2</span>

                <span>3</span>

                <span>4</span>

                <span>5</span>

                <span>6</span>

                <span>7</span>

                <span>8</span>

                <span>9</span>

            </div>

        </span>

        <span class="a2">

            <div class="num-line" style="top:-72px">

                <span>0</span>

                <span>1</span>

                <span>2</span>

                <span>3</span>

                <span>4</span>

                <span>5</span>

                <span>6</span>

                <span>7</span>

                <span>8</span>

                <span>9</span>

            </div>

        </span>

    </span>

</body>

<style>

.num-line{

    width: 10px;

    float: left;

    position: relative;

}

.a2{

    height: 20px;

    display: inline-block;

    overflow: hidden;

}

</style>

这个代码是没问题的，但是我用js去生成这样的代码就出问题了，好奇怪，求高手解答。。
完成代码看这里
js生成的代码看这里

...全文

346 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

Go 旅城通票 2014-11-27

打赏
举报

你贴出来的示例一个有空格节点（回车），js生成的没有空白节点，导致元素全拍一起了而且js生成的部分你也少了样式.rollingNumber_bit。。要么直接将数字span对象设置diaplay为block

.rollingNumber_item{display:block}

lingyue1012 2014-11-25

打赏
举报

贴出来的代码是对的, 我想用js生成同样效果的html,css.但是结果不一样,不知道为什么? 你可以比较一下这两个链接,看下效果, 1,直接用html写成的效果,(成功的) http://jsfiddle.net/Chanble/s8f1f5js/ 用js生成效果 http://jsfiddle.net/Chanble/1ger90L1/

弘毅致远 2014-11-24

打赏
举报

<body>
    <div class="rolling_number">
        <div class="a2">
            <div class="num-line" style="top:-18px">
                <span>0</span>
                <span>1</span>
                <span>2</span>
                <span>3</span>
                <span>4</span>
                <span>5</span>
                <span>6</span>
                <span>7</span>
                <span>8</span>
                <span>9</span>
            </div>
        </div>
        <div class="a2">
            <div class="num-line" style="top:-36px">
                <span>0</span>
                <span>1</span>
                <span>2</span>
                <span>3</span>
                <span>4</span>
                <span>5</span>
                <span>6</span>
                <span>7</span>
                <span>8</span>
                <span>9</span>
            </div>
        </div>
        <div class="a2">
            <div class="num-line" style="top:-72px">
                <span>0</span>
                <span>1</span>
                <span>2</span>
                <span>3</span>
                <span>4</span>
                <span>5</span>
                <span>6</span>
                <span>7</span>
                <span>8</span>
                <span>9</span>
            </div>
        </div>
    </div>
</body>
<style>
.num-line{
    width: 10px;
    float: left;
    position: relative;
}
.a2{
    height: 20px;
    display: inline-block;
    overflow: hidden;
}
</style>

改成这样吧

弘毅致远 2014-11-24