일부 DIV 공간이없는 열에 공백을 넣는 방법 <br />

Question

양식의 입력 요소에 대해 두 열 이상의 DIV 열을 갖기 위해 노력하고 있습니다. 매우 복잡한 형식이며, 일부 요소는 일부 대답에 따라 숨겨지고 표시됩니다.

문제는 효과적인 숨기기/표시가있는 동안 IE6에서 공간에 따라 DIV를 가져올 수 없다는 것입니다.

.first_column 
{ 
    float:left; 
    clear:both; 
} 
.second_column 
{ 
    float:left; 
} 

그리고 일부 HTML ... 예상대로이 작동

<div id="question1" class="first_column"> 
first row, column 1 <input type="text" id="asdf"> 
</div> 

<br style="clear:both;" /> 

<div id="question2" class="first_column"> 
second row, column 1 <input type="text" id="asdf2"> 
</div> 

<div id="question3" class="second_column"> 
second row, column 2 <input type="text" id="asdf3"> 
</div> 

<br style="clear:both;" /> 

:이 대부분 일 것입니다. 문제는 표시/숨기기입니다. # question1을 숨기면 줄 바꿈이 그대로 유지됩니다. 이 작은 예제에서는별로 좋지 않지만 표시/숨기기에 따라 많은 질문이 있으면 질문 행 사이에 큰 간격이 생기기 시작합니다.

줄 바꿈없이 어떻게 처리 할 수 ​​있습니까? 대신 BR

내가 다른 사업부에서 전체 행을 포장 제안하고, 그것을 row_2를 row_1 같은 ID를 제공

Answer 1

불행히도 IE6는 다른 모든 브라우저에서 HTML을 다르게 렌더링하기로 결심하고 있습니다. 불행히도 나는 br와 함께 명확한 솔루션을 사용하여 간단한 해결책을 찾을 수 없었다. 오 잘 ... IE6와 다른 곳에서 싸울 시간.

제안 해 주셔서 감사합니다.

Answer 2

사용 마진 - 하단. 여기에는 모든 질문과 함께 br가 포함됩니다. 그런 다음 행을 숨기면 br도 숨 깁니다.

Answer 3

당신의 div의에

Answer 4

이 패턴을 사용하십시오. 더 나은 의미, 간단한 코드. 숨기기/표시를 위해 DIVS에서 이것을 감싸십시오.

this.next ('. question'). toggle() - Prototype 라이브러리를 사용합니다. 주어진 클래스 이름을 가진 다음 요소를 찾고 해당 요소를 숨기거나 표시합니다. 는 CSS에서

:

<a href="javascript:;//open question" onclick="this.next('.question').toggle()">open</a> 
<div class='question'> 
<label>First Name</label> 
<input .... /> 
<div class="formClear"></div> 
</div> 

... 그리고이 문제에 대한이 CSS

.label { 
width:120px; 
float:left; 
margin-right:15px 
} 

.input { 
float:left 
} 

.formClear { 
clear:left; 
height:15px; 
} 

Answer 5

, 내 웹 사이트에 내가 이것을 사용

.spacer 
{clear: both; visibility: hidden;} 

되는 HTML에서 :

<div class="spacer"></div> 

DIV는 픽셀을 움직이지 않으므로 다른 유형의 DIV에 여백을 적용하여 원하는 레이아웃을 완벽하게 유지할 수 있기 때문에 이러한 유형의 것에서 BR (또는 HR)보다 좋지 않습니다. 모든 브라우저에서 작동하며 IE6에서도 작동합니다.

이렇게하면 대부분의 부동 문제가 해결됩니다. 크로스 브라우저가 아닌 다른 솔루션을 찾지 못했습니다.