픽셀 및 백분율 너비 divs 나란히 나란히

Question

비슷한 질문을 많이 발견했으며 여러 가지 솔루션을 시도했습니다 (소위 성배 CSS 레이아웃 포함). 내가 원하는 것을해라.

id가 right 인 포함 div (CSS가 포함 된 블록)가 있습니다. 왼쪽에는 고정 너비 div (분할 막대)가 필요하지만 그 내용이 무엇인지는 중요하지 않습니다 (id splitpane). 오른쪽에 공간의 나머지 부분을 채우고 다른 div (id right-box 아래)를 채 웁니다. 3px의 - 내가 왼쪽으로 한 width: 3px 설정을 두 내부 div의 display: inline-block (vertical-align: top으로) 만드는 시도,하지만 폭이 100 %를 가질 수있는 권리를 설정하는 방법이없는 한

. 또한 float: left/margin-left: -100%/margin-left: 3px 트릭을 사용해 보았지만 동일한 문제가 있습니다. 100 %와 3px가 상위 포함 블록을 오버플로하고 스크롤 막대가 튀어 나오게합니다. (물론, 스크롤 막대 자체가 문제는 아니며,이를 제거하기 위해 overflow: hidden을 사용할 수 있지만 오른쪽의 내용은 잘립니다.)

현재 올바른 div에는 width: 99.5%이 사용되지만 그건 끔찍한 해킹입니다 (화면 너비에 따라 오버플로가 발생할 수 있습니다). 그것은 보이는이 같은 비트 :

#right { 
    display: inline-block; 
    vertical-align: top; 
    height: 100%; 
    width: 85%; /* this is part of a larger div */ 
} 
#right-box { 
    width: 99.5%; /* stupid hack; actually want 100% - 3px for splitter */ 
    height: 100%; 
} 
#splitpane { 
    float: left; 
    width: 3px; 
    height: 100%; 
    background: white; 
    border-left: solid gray 1px; 
    border-right: solid gray 1px; 
    cursor: e-resize; 
} 

는이 작업을 수행하는 경우에도 가능 : (플로트 버전,하지만 인라인 블록 버전과 유사)을 다음과 같이 CSS와

<div id="right"><div id="splitpane"></div><div id="right-box"> 
    ... 
</div></div> 

? 이것은 내부 앱을위한 것입니다. 따라서 솔루션은 Firefox 3에서만 작동해야합니다 (FF3과 관련된 경우 솔루션이 표준 호환이지만 다른 브라우저는 Firefox가 아니기 때문에 가급적이면 가능함). 암호).

Answer 1

가능합니다. 블록 레벨 요소가 자동으로 확장되어 나머지 수평 공간을 차지하기 때문에 원하는 폭으로 채워지지 않은 떠 다니는 요소 옆에있는 블록 레벨 요소를 활용할 수 있습니다.

<style type="text/css"> 
    div { 
     height: 100px; 
    } 
    #container { 
     width: 100%; 
    } 
    #left { 
     background: #FF0; 
    } 
    #splitpane { 
     position: relative; 
     float: right; 
     background: #000; 
     width: 3px; 
    } 
</style> 

<div id="container"> 
    <div id="splitpane"></div> 
    <div id="left"></div> 
</div> 

는 http://jsfiddle.net/georeith/W4YMD/1/

Answer 2

div # right-box에 플로팅되지 않은 콘텐츠 만 포함되는 경우 콘텐츠를 대신 #right 안에 넣고 떠있는 #splitpane을 둘러 볼 수 있습니다.

Answer 3

왜 오른쪽 상자에 여백 - 왼쪽 (부유 식 레이아웃 이었기 때문에)을 사용하지 않았습니까?

때문에 분할 사업부를 만들 필요가 없습니다 ...

#right{ 
width:200px; /*specify some width*/ 
} 
#rightbox{ 
float:left; 
margin-left: 3px; /*replace the splitter*/ 
/*margin: 0 3px; /*use this to give left & right splitter*/ */ 
} 

그래 그런 일이, 내가 빈 사업부 싫어, 그것은 의미하지 그리고 그것은 "오래된"테이블 길에 스플리터를 넣어처럼

Answer 4

DIV는 서로 "말하지"않기 때문에 잘못된 요소 유형입니다. 테이블을 사용하면 쉽게이 작업을 수행 할 수 있습니다.

<table style="width:200px"> 
<tr> 
    <td id="splitpane" style="width: 3px">...</td> 
    <td id="rightBox" style="width: 100%">...</td> 
<tr> 
</table> 

100 %는 rightBox를 가능한 한 넓게 만들지 만 테이블의 제한 내에서 만듭니다.