사용 가능한 가로 공간을 채우기 위해 두 개의 div 요소를 늘리는 방법은 무엇입니까?

Question

정말 저를 도울 수 있기를 바랍니다.

내가 뭘 하려는지 보여주기 위해 this fiddle을 만들었습니다.

내 질문은 : 사용 가능한 가로 공간을 채우기 위해 두 개의 div 요소를 어떻게 확장합니까?

당신이 볼 수 있듯이 5 개의 div 요소가 함께 묶여 있고 배경색과 너비를 100 %로 설정 한 div 요소로 둘러 쌉니다.

너비가 50px 인 세 개의 div 요소가 있습니다.

다른 두 div 요소의 너비는 나머지 사용 가능한 공간까지 채워야하며, 두 div의 각각에 대해 동일한 너비 -> 50 %를 가져야합니다.

제 문제는 두 div 요소 모두 50 %가 총 너비가 100 %라는 것입니다. 그리고 가능한 공간 넓이가 아닙니다. 나는 테이블을 사용하지 않는 것을 시도하고

등

분명 뭔가가 있다면 알려주세요.

편집 : I'd like to hear your comments about this way.

Answer 1

한 가지 방법을 width:50%; 제거 divs를 테이블의 셀처럼 취급하십시오. 표의 고유 한 속성은 셀 너비에 상관없이 표의 너비를 채우는 것입니다. 일부 셀에 폭을 지정하면 나머지 셀이 나머지 공간을 채 웁니다. display:table과 display:table-cell을 사용하면 html을 변경하지 않고도이 기능을 활용할 수 있습니다. 나는이 테스트하지했습니다

http://jsfiddle.net/GyxWm/

을하지만 모두 "현재"브라우저에서 작동한다 :이 예제를 보라. IE8 이상에서는 작동하지만 IE7에서는 작동하지 않으며 IE6에서는 작동하지 않을 것입니다.

Answer 2

두려워 난 당신이 할 수있는 것 같아요.

은 포함 된 div에서 코드를 제거하고 모든 요소는 서로 인접 해 있습니다. 요소가 화면 오른쪽에서 벗어나면 아래쪽이 공백을두고 래핑됩니다 (상대적 위치 지정과 유사 함).

또한 고정 너비와 가변 너비를 비교하려고 시도하고 있습니다. 불가능한 너비에 가깝습니다. http://jsfiddle.net/P5Kjh/5/

먼저 내가이 div의 다시 코드를 줄이고 작업 것을 가지고 : 당신이 여기를 살펴 경우

.

backgroundG 클래스에 overflow:hidden을 추가하여 회색 배경이 있고 두 div가 왼쪽으로 떠있었습니다.

너비가 더 작은 비율로 작업해야하는 각 요소에 테두리를 추가하면 폭을 설정하고 누적 합계는 100 %가되어야합니다.

그런 다음 새 backgroundG 요소에 다른 3을 다시 추가하고 fillup 요소의 separte 클래스를 작성하여 80 % (테두리 없음)가되도록했습니다.

아마 당신에게 많은 도움이되지 않습니다. 미안해.

환호

Answer 3

당신은 자바 스크립트의 도움으로 할 수 있습니다.이 같은 변경 div 태그 : somehwere 해당 태그 후
<div id="part1" class="sectionFillUp">section2</div>
<div id="part2" class="sectionFillUp">section4</div>

그리고이 자바 스크립트를 추가

    var elem1 = document.getElementById("part1"); 
    elem1.style.width = (screen.width - 150)/2; 
    var elem2 = document.getElementById("part2"); 
    elem2.style.width = (screen.width - 150)/2; 

과 CSS에 sectionFillUp에서이하는 것입니다 해결하기