html - 时钟网格布局

Question

所以我正在创建一个时钟网格布局，我只是在寻找一些关于下一步要去哪里的信息和建议。基本上我已经创建了布局，但正如您将看到的那样，它还不是很完美。纠正它的最佳方法是什么？我必须使用绝对定位来抵消它还是有其他更合适的方法？我也在寻找一种使整个时钟 29 cm 的方法，然后使用 printElement.js(我认为是)将其打印在 A3 尺寸的纸上，同时允许每边填充能够削减周围。 https://screenshotscdn.firefoxusercontent.com/images/114bea21-b19b-44e7-8a9c-00965d32e71e.png

    <div class="container">
        <div class="row">
            <div class="col-1-7">&nbsp;</div>
            <div class="col-1-7">&nbsp;</div>
            <div class="col-1-7">&nbsp;</div>
            <!-- 12 -->
            <div class="col-1-7 clock-number-12"><img src="img/placeholder.png"></div>
            <div class="col-1-7">&nbsp;</div>
            <div class="col-1-7">&nbsp;</div>
            <div class="col-1-7">&nbsp;</div>
        </div>
        <div class="row">
            <div class="col-1-7">&nbsp;</div>
            <div class="col-1-7">&nbsp;</div>
            <!-- 11 -->
            <div class="col-1-7 clock-number-11"><img src="img/placeholder.png"></div>
            <div class="col-1-7">&nbsp;</div>
            <!-- 1 -->
            <div class="col-1-7 clock-number-1"><img src="img/placeholder.png"></div>
            <div class="col-1-7">&nbsp;</div>
            <div class="col-1-7">&nbsp;</div>
        </div>
        <div class="row">
            <div class="col-1-7">&nbsp;</div>
            <!-- 10 -->
            <div class="col-1-7 clock-number-10"><img src="img/placeholder.png"></div>
            <div class="col-1-7">&nbsp;</div>
            <div class="col-1-7">&nbsp;</div>
            <div class="col-1-7">&nbsp;</div>
            <!-- 2 -->
            <div class="col-1-7 clock-number-2"><img src="img/placeholder.png"></div>
            <div class="col-1-7">&nbsp;</div>
        </div>
        <div class="row">
            <!-- 9 -->
            <div class="col-1-7 clock-number-9"><img src="img/placeholder.png"></div>
            <div class="col-1-7">&nbsp;</div>
            <div class="col-1-7">&nbsp;</div>
            <div class="col-1-7">&nbsp;</div>
            <div class="col-1-7">&nbsp;</div>
            <div class="col-1-7">&nbsp;</div>
            <!-- 3 -->
            <div class="col-1-7 clock-number-3"><img src="img/placeholder.png"></div>
        </div>
        <div class="row">
            <div class="col-1-7">&nbsp;</div>
            <!-- 8 -->
            <div class="col-1-7 clock-number-8"><img src="img/placeholder.png"></div>
            <div class="col-1-7">&nbsp;</div>
            <div class="col-1-7">&nbsp;</div>
            <div class="col-1-7">&nbsp;</div>
            <!-- 4 -->
            <div class="col-1-7 clock-number-4"><img src="img/placeholder.png"></div>
            <div class="col-1-7">&nbsp;</div>
        </div>
        <div class="row">
            <div class="col-1-7">&nbsp;</div>
            <div class="col-1-7">&nbsp;</div>
            <!-- 7 -->
            <div class="col-1-7 clock-number-7"><img src="img/placeholder.png"></div>
            <div class="col-1-7">&nbsp;</div>
            <!-- 5 -->
            <div class="col-1-7 clock-number-5"><img src="img/placeholder.png"></div>
            <div class="col-1-7">&nbsp;</div>
            <div class="col-1-7">&nbsp;</div>
        </div>
        <div class="row">
            <div class="col-1-7">&nbsp;</div>
            <div class="col-1-7">&nbsp;</div>
            <div class="col-1-7">&nbsp;</div>
            <!-- 6 -->
            <div class="col-1-7 clock-number-6"><img src="img/placeholder.png"></div>
            <div class="col-1-7">&nbsp;</div>
            <div class="col-1-7">&nbsp;</div>
            <div class="col-1-7">&nbsp;</div>
        </div>
    </div>

CSS:

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

Answer 1

调整行宽和负图像边距的替代方法是 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>

在 clock.css 中是这样的:

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

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

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