CSS:根据屏幕宽度改变风格

我的一个网站的一部分,有3件事情:2的照片,一个DIV。 的宽度为100%,高度为14%。 的图像被在此领域设定为100%的高度。 我想最后一个div来自动调整为剩余量。 下面是代码:

<div id="header"> <img src="foo.jpg" class="logo"> <img src="bar.jpg" class="logo"> <div id="clock"> </div> </div>

和CSS

#header: width: 100%; height: 14%; } #clock { position: absolute; left: 75%; top: 0.1%; } .logo { height: 100%; }

我想最后一个div来在第二图像的最后拿起不管。 我怎样才能做到这一点?

我曾考虑使用javascript,像

var img1=[w,h];//I know this var img2=[w,h];//I will put the actual #s var w=screen.availWidth; var h=document.getElementById("header").style.height; var realw1=(h/img1[1])*img1[0]; var realw2=(h/img2[1])*img2[0]; var remaining=w-(realw1+realw2); document.getElementById("clock").style.width=remaining;

要么

document.getElementById("clock").style.width=screen.availWidth-(((document.getElementById("header").style.height/img1h)*img1w)+((document.getElementById("header").style.height/img2h)*img2w));

我宁愿只CSS,但我会用javascript,如果我不得不这样做。

--------------解决方案-------------

只是float:left的照片吗? 什么是你的div#时钟包含哪些内容?

EDITED

这个CSS隐藏背后的标志,调整大小足够小,当时钟。

#header{
position: relative;
width: 100%;
height: 14%;
white-space: nowrap;
}
#clock {
position: absolute;
top: 0px;
left: 75%;
width: 25%;
z-index: -1000;
}
.logo {
height: 100%;
}

如果你想改变时钟的宽度, #clock.left + #clock.width应该等于100%以下,以防止#clock的右侧“突破” #header

如果你的图像包含透明区域,则需要添加一个包装与background设定。

分类:JavaScript的 时间:2015-03-15 人气:0
本文关键词: 的JavaScript,CSS
分享到:

相关文章

Copyright (C) 55228885.com, All Rights Reserved.

55228885 版权所有 京ICP备15002868号

processed in 0.480 (s). 10 q(s)