时间戳

首页 > 解决方案 > 时钟网格布局

html - 时钟网格布局

问题描述

所以我正在创建一个时钟网格布局，我只是在寻找一些关于下一步去哪里的信息和建议。基本上我已经创建了布局，但是你会看到它还不是很完美。纠正它的最佳方法是什么？我是否必须使用绝对定位来抵消它，还是有另一种更合适的方法？我也在寻找一种将整个时钟设为29 厘米的方法，然后使用 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;
}

标签： htmlcssbootstrap-4

解决方案

除了调整行宽和负图像边距之外，还有 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。

推荐阅读