CSS : 화면 너비에 따라 스타일을 변경하십시오.

Question

내 웹 사이트의 한 부분에는 세 가지가 있습니다. 두 개의 그림과 한 개의 div가 있습니다. 너비는 100 %이고 높이는 14 %입니다. 이미지는이 영역에서 100 % 높이로 설정됩니다. 마지막 div가 나머지 크기로 자동 크기 조정되기를 원합니다. 내가 마지막 DIV 상관없이 2 이미지의 끝 부분에 올리지 할

<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%; 
} 

: 여기에 코드입니다. 어떻게해야합니까?

나는 단지 CSS를 선호

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)); 

처럼, 자바 스크립트를 사용하여 고려,하지만 내가 필요하다면 나는 자바 스크립트를 사용합니다.

Answer 1

그냥 float:left 사진이 있습니까? # 시계에 포함 된 내용은 무엇입니까?

Answer 2

편집

이 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이 #clock을 방지하기 위해, 100 % 이하로 동일해야 #header의 오른쪽 "돌파".

이미지에 투명 영역이있는 경우 background으로 설정된 래퍼를 추가해야합니다.