div로 혼합 된 픽셀/비율 레이아웃 만들기

첨부 된 그림에서 볼 수있는 것처럼 페이지 레이아웃을 만들려고합니다. 문제는 제대로 작동하지 않는다는 것입니다. 나는 반나절을 성공 시키려고 노력했지만 성공하지는 못했습니다. 난 그냥 메뉴에 대한 고정 너비 div와 그 두 div 옆에있는 각각의 나머지 페이지 너비의 절반 걸릴 열을 만들고 싶어. 높이는 내용에 따라 달라질 필요가 있습니다.div로 혼합 된 픽셀/비율 레이아웃 만들기

아무 생각 없습니까? 나는 그러한 혼합 된 픽셀/픽셀 레이아웃에 관한 많은 정보를 찾을 수 있었지만, 그렇게 어렵지는 않다.

사진 : 그런 enter image description here

출처

2012-05-18 koenlek

음수 여백으로 문제가 해결됩니다. 모두들. – Ben

뭔가 :

<style type="text/css"> 
.container 
{ 
    padding-left: 160px; 
    position: relative; 
} 
.leftmenu 
{ 
    width: 160px; 
    height: 200px; 
    background: red; /* For demo purposes */ 
    position: absolute; 
    top: 0; 
    left: 0; 
} 
.width50 
{ 
    width: 50%; 
    float: left; 
} 
.left-content 
{ 
    height: 300px; 
    background: green /* For demo purposes */ 
} 
.right-content 
{ 
    height: 150px; 
    background: blue /* For demo purposes */ 
} 
.clear 
{ 
    clear: both; 
} 
</style> 
<div class="container"> 
    <div class="leftmenu"></div> 
    <div class="content"> 
    <div class="width50 left-content"></div> 
    <div class="width50 right-content"></div> 
    <div class="clear"></div> 
    </div> 
</div>

출처

2012-05-18 13:29:39 Sylvix

완벽하게 작동합니다. 여기에 코드로 [jsfiddle 예제] (http://jsfiddle.net/libinvbabu/R6LCz/)를 만들었습니다. 결과 패널의 크기를 조정하여 결과를 볼 수 있습니다. +1 – Libin

감사합니다. 나는 지금까지 그것을 볼 시간이 없었다. 그것은 IE를 제외한 모든 브라우저에서 매력처럼 작동합니다. 문제는 그것이 IE에서만 작동하는 회사를위한 것입니다. 이 문제를 해결하는 방법? 많은 감사드립니다! – koenlek

이 도움말은 다음을 참조하십시오. http://stackoverflow.com/questions/26386171/how-to-ensure-the-background-image-inside-a-div-is-evenly-shown/26386885?noredirect=1# comment41429026_26386885 – SearchForKnowledge

자바 스크립트 접근 방식 (머리글 또는 바닥 글없이) 단지 내부 컨테이너입니다.

여기 정확히 필요한 레이아웃을 만들었습니다. Check this link.

브라우저의 크기를 조정하고 새로 고칩니다. 그걸 볼 수 있어요!

다음 스크립트를 사용하여 화면 해상도를 찾은 다음 콘텐츠 너비를 계산했습니다.

<script type="text/javascript"> 
wscreen = window.innerWidth; //Determine screen resolution 
content_width = (wscreen - 160); //Adjusting the screen 
document.getElementById("container").style.width = content_width + "px"; // Adding the width to CSS 
</script>

순수한 CSS 방식으로 작동합니다.

건배 !!!

출처

2012-05-18 17:42:00 Libin

div로 혼합 된 픽셀/비율 레이아웃 만들기

답변

관련 문제