Question

我有一个带有时钟的徽标。我们的想法是让时钟的指针移动，让它变得酷炫有趣。让手移动一些jQuery是没有问题的。问题是我希望所有东西都能响应，当我缩小窗口时，手会从时钟部分滑落。

为了让事情变得更有趣，一切都是SVG。

思考代码：

HTML

<!-- logo -->
<div class="logobox">
    <img src="<?php echo get_template_directory_uri(); ?>/img/logo.svg" alt="Logo" class="logo-img" id="logo">
    <img src="<?php echo get_template_directory_uri(); ?>/img/clockhourhand.svg" alt="hourhand" class="logo-img" id="hour">
    <img src="<?php echo get_template_directory_uri(); ?>/img/clockminhand.svg" alt="minutehand" class="logo-img" id="min">
</div>
<!-- /logo -->

CSS

/* logo */
.logobox {
position: relative;
margin: 0 auto;
text-align: center;
width: 80%;
height: 100%;
}

.logobox img{
margin: 0 auto;
left: 50%;
top: 10%;
}

#logo {
padding: 2em 0;
margin: 0 auto;
text-align: center;
 }

/*------------------------------------*\
    CLOCK
\*------------------------------------*/

#min, #hour {
position: absolute;
text-align: center;
width: 25%;
height: 25%;
top: 2.5em;
left: 11.8em;
}

#min {
    z-index: 2;
 }

#hour {
    z-index: 1;
 }

我一直在讨论这个问题的时间比我承认的要长，而且我不得不承认我不像这里的蜂巢那样聪明。谢谢你的帮助。

修改

fiddle

Answer 1

能够使用响应式媒体查询并将顶部和左侧属性更改为百分比来解决此问题。

<强> CSS：

#min, #hour {
position: absolute;
text-align: center;
width: 25%;
height: 25%;
left: 27%;
top: 18%;
}

如何以响应的方式保持3个div对齐

1 个答案: