Question

我网站的一部分，共有3件事：2张图片和1张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。

Answer 1

<强> 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的右侧。 / p>

如果您的图片包含透明区域，则需要添加一个background设置的包装。

Answer 2

只是float:left图片？ div＃clock包含什么？

CSS：根据屏幕宽度更改样式

2 个答案: