jQuery - 屏幕流动态布局

Question

我需要创建一些动态HTML布局，它将包含具有不同方向的电话框架，这些电话框架通过水平或垂直线连接在一起。线应该与帧相关。每个帧也包含它的标签。

HTML CODE：

<div class="flow-canvas">
            <div class="device-frame portrait" data-next="landscape">
                 <div class="screen-wrapper">
                    1
                    <div class="label">screen label</div>
                 </div>
            </div>
            <div class="device-frame landscape" data-next="portrait" data-prev="portrait">
                 <div class="screen-wrapper">
                    2
                    <div class="label">screen label</div>
                 </div>   
            </div>
            <div class="device-frame portrait" data-next="portrait" data-prev="landscape">
                <div class="screen-wrapper">
                    3
                    <div class="label">screen label</div>
                </div>
            </div>
            <div class="device-frame portrait" data-next="portrait" data-prev="portrait">
                <div class="screen-wrapper">
                     4   
                     <div class="label">screen label</div>
                </div>
            </div>
            <div class="device-frame portrait"  data-next="portrait" data-prev="portrait">
                <div class="screen-wrapper">
                    5
                    <div class="label">screen label</div>       
                </div>
            </div>
            <div class="device-frame portrait" data-next="portrait" data-prev="portrait">
                <div class="screen-wrapper">
                    6
                    <div class="label">screen label</div>   
                </div>
            </div>
            <div class="device-frame portrait" data-next="portrait" data-prev="portrait">
                 <div class="screen-wrapper">
                    7
                    <div class="label">screen label</div>
                 </div>   
            </div>
            <div class="device-frame portrait" data-next="portrait" data-prev="portrait"> 
                <div class="screen-wrapper">
                    8
                    <div class="label">screen label</div>
                </div>
            </div>
            <div class="device-frame portrait"  data-prev="portrait">
                <div class="screen-wrapper">
                    9

                </div>
            </div>
        </div>

的jQuery

function drawFlow() {
    $('.flow-canvas').each(function () {
        var parentDiv = $(this);
        parentDiv.width("100%");
        var parentDivWidth = parseInt(parentDiv.width());
        $('.device-frame:last-child', parentDiv).addClass('last');
        $('.device-frame:first-child', parentDiv).addClass('first');
        var screens = $('.device-frame', parentDiv);
        var screenWidth = parseInt($('.device-frame', parentDiv).css('width')) + parseInt($('.device-frame', parentDiv).css('margin-left')) + parseInt($('.device-frame', parentDiv).css('margin-right'));
        var lisInRow = Math.floor(parentDivWidth / screenWidth);
        parentDiv.css('width', lisInRow * screenWidth);
        var rowIndex = 1;
        for (var i = 0; i < screens.length; i += lisInRow) {

            if (rowIndex % 2 == 0) {
                screens.slice(i, i + lisInRow).attr('data-row', 'even').attr('data-order', '');
            } else {
                screens.slice(i, i + lisInRow).attr('data-row', 'odd').attr('data-order', '');
            }
            $(screens[i]).attr('data-order', 'first-in-row');
            $(screens[i + lisInRow - 1]).attr('data-order', 'last-in-row');
            rowIndex++;
        }

    })
}

DEMO。如果您调整结果窗口的大小并刷新页面，您将看到丑陋的布局。我无法解决多个问题： 1.如何将与框架方向相关的垂直线和水平线中心化？ 2.如何将与线条相关的标签集中化？ 3.铬合金中的线条与标签重叠。我认为这个问题是由float: left样式以及:before和:after伪元素行为引起的。

我这是愚蠢的解决方案，请建议我另一个。