所以我正在创建一个时钟网格布局，我只是在寻找一些关于下一步要去哪里的信息和建议。基本上我已经创建了布局，但正如您将看到的那样，它还不是很完美。纠正它的最佳方法是什么？我必须使用绝对定位来抵消它还是有其他更合适的方法？我也在寻找一种使整个时钟 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"> </div>
<div class="col-1-7"> </div>
<div class="col-1-7"> </div>
<!-- 12 -->
<div class="col-1-7 clock-number-12"><img src="img/placeholder.png"></div>
<div class="col-1-7"> </div>
<div class="col-1-7"> </div>
<div class="col-1-7"> </div>
</div>
<div class="row">
<div class="col-1-7"> </div>
<div class="col-1-7"> </div>
<!-- 11 -->
<div class="col-1-7 clock-number-11"><img src="img/placeholder.png"></div>
<div class="col-1-7"> </div>
<!-- 1 -->
<div class="col-1-7 clock-number-1"><img src="img/placeholder.png"></div>
<div class="col-1-7"> </div>
<div class="col-1-7"> </div>
</div>
<div class="row">
<div class="col-1-7"> </div>
<!-- 10 -->
<div class="col-1-7 clock-number-10"><img src="img/placeholder.png"></div>
<div class="col-1-7"> </div>
<div class="col-1-7"> </div>
<div class="col-1-7"> </div>
<!-- 2 -->
<div class="col-1-7 clock-number-2"><img src="img/placeholder.png"></div>
<div class="col-1-7"> </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"> </div>
<div class="col-1-7"> </div>
<div class="col-1-7"> </div>
<div class="col-1-7"> </div>
<div class="col-1-7"> </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"> </div>
<!-- 8 -->
<div class="col-1-7 clock-number-8"><img src="img/placeholder.png"></div>
<div class="col-1-7"> </div>
<div class="col-1-7"> </div>
<div class="col-1-7"> </div>
<!-- 4 -->
<div class="col-1-7 clock-number-4"><img src="img/placeholder.png"></div>
<div class="col-1-7"> </div>
</div>
<div class="row">
<div class="col-1-7"> </div>
<div class="col-1-7"> </div>
<!-- 7 -->
<div class="col-1-7 clock-number-7"><img src="img/placeholder.png"></div>
<div class="col-1-7"> </div>
<!-- 5 -->
<div class="col-1-7 clock-number-5"><img src="img/placeholder.png"></div>
<div class="col-1-7"> </div>
<div class="col-1-7"> </div>
</div>
<div class="row">
<div class="col-1-7"> </div>
<div class="col-1-7"> </div>
<div class="col-1-7"> </div>
<!-- 6 -->
<div class="col-1-7 clock-number-6"><img src="img/placeholder.png"></div>
<div class="col-1-7"> </div>
<div class="col-1-7"> </div>
<div class="col-1-7"> </div>
</div>
</div>
CSS:
.col-1-7 {
width: 14.28571428%;
float: left;
}
最佳答案
调整行宽和负图像边距的替代方法是 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。
关于html - 时钟网格布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51717619/