Html 时钟网格布局

因此，我正在创建一个时钟网格布局的过程中，我只是在寻找一些关于下一步要去哪里的信息和建议。基本上，我已经创建了布局，但正如您将看到的，它还不是很完美。纠正它的最佳方法是什么？我是否必须使用绝对定位对其进行偏移，或者是否有其他更合适的方法？我也在寻找一种方法，使整个时钟29厘米，然后使用printElement.js，我认为这是打印出来的一个A3大小的纸，同时允许填充在每一边能够削减。

---

除了调整行宽和负图像边距之外，还有javascript/jquery：

<div id="clock"></div>

<script src="jquery.printElement.js"></script>
<script>
$(document).ready(function(){
    var tx = 300; //distance from #clock == defines the clock size
    for(var i=-60; i<300; i+=30){ //-60 > 300 = to start the process from HOUR 1
        var rad = i * (Math.PI/180);
        var x = tx*Math.cos(rad);
        var y = tx*Math.sin(rad);
        $('#clock').append("<img src='img/placeholder.png' style='left:"+x+"px;top:"+y+"px'>");
    }

    $("#clock").printElement({
        printMode:'popup',
        leaveOpen:true,
        overrideElementCSS:[
            'clock.css'
        ]
    });
});
</script>

在实际的html页面中，您可以使用完全不同的样式，因为overrideElementCSS会覆盖页面本身包含的css

.col-1-7 {
  width: 14.28571428%;
  float: left;
}

<div id="clock"></div>

<script src="jquery.printElement.js"></script>
<script>
$(document).ready(function(){
    var tx = 300; //distance from #clock == defines the clock size
    for(var i=-60; i<300; i+=30){ //-60 > 300 = to start the process from HOUR 1
        var rad = i * (Math.PI/180);
        var x = tx*Math.cos(rad);
        var y = tx*Math.sin(rad);
        $('#clock').append("<img src='img/placeholder.png' style='left:"+x+"px;top:"+y+"px'>");
    }

    $("#clock").printElement({
        printMode:'popup',
        leaveOpen:true,
        overrideElementCSS:[
            'clock.css'
        ]
    });
});
</script>

#clock{
    position: absolute;
    left: 50%;
    top: 50%;
}

img{
    width: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
}