양식의 표 레이아웃을 바꾸는 CSS

Question

다른 질문을 살펴본 결과 해결책을 찾을 수 없습니다. 이 이미지를 고려하십시오 : mockup http://img201.imageshack.us/img201/935/image2h.png

div를 랩핑하여 세로로 쌓고 싶습니다. GREEN div는 줄의 래퍼입니다. BLUE div에는 html 레이블이 포함되어 있으며 툴팁 아이콘이 포함되어 있습니다. ORANGE div는 일종의 항목 (input, select, textarea)을 포함합니다.

이들 중 몇 개는 세로로 쌓아 양식을 구성합니다. 지금이 일을하고 있지만 컨테이너 div의 높이를 지정해야하며 내용에 따라 실제로 변경해야합니다. 항목이 있으면 해당 항목을 고려해야합니다. 이미지와 다른 것들도 여기에 착륙 할 수 있습니다.

나는 BLUE div에 설정된 너비가 있으며 ORANGE는 float : left입니다. div의 높이를 없애고 콘텐츠로 결정하도록하려면 어떻게해야합니까? 더 좋은 방법이 있습니까? 모든 것을 다른 것으로 바꾸는 것은 어려울 것이며 모든 요소 나 어떤 것을 스타일링하는 방법을 선호 할 것입니다.

는

내가 사용하는 코드 같은 것입니다 : 나는 당신이 당신의 목표를 달성하기 위해 적은 마크 업을 사용할 수 있다고 생각의 시작을 위해,

.EntLine { 
    height: 20px; 
    position: relative; 
    margin-top: 2px; 
    text-align: left; 
    white-space: nowrap; 
} 

.EntLbl { 
    float: left; 
    width: 120px; 
    padding: 3px 0px 0px 3px; 
    min-width: 120px; 
    max-width: 120px; 
    vertical-align: text-top; 
} 

.EntFld { 
    float: left; 
    height: 20px; 
    padding: 0px; 
    width: 200px; 
} 

Answer 1

음 :

<div class=EntLine> 
    <div class=EntLbl> 
     <label for="Name">Name</label> 
    </div> 
    <div class=EntFld> 
     <input type=text id="Name" /> 
    </div> 
</div> 

CSS는이처럼 보인다 . 당신은 양식의 모든 요소 주위에 div에 포장하는 좋은 이유가있을 수 있지만, 그것의 경우 단지 각 줄에 하나의 레이블을 입력 쌍을 강제로 다음 수를 중첩 label 태그 내부의 input :

 <label for="Name">Name 
      <input type="text" id="Name" /> 
     </label> 

이 방법을 사용하면 간단하게 다음을 사용할 수 있습니다.

label {display: block; } 

각 쌍을 고유 한 행으로 설정합니다. 이는 또한 floatlabel으로의 필요성을 제거 할 것이므로, 포함하는 요소 중 height을 지정할 필요가 없습니다.

관련 필드/라벨에 여러 클래스를 적용 할 수 있지만 문제는 훨씬 적습니다. 내가 정말로 뭔가를 놓치지 않으면. 특정 질문에없는 정확한 대답은,이 비록

#empty_element { 
disply: block; 
height: 0; 
clear: both; /* to force the parent element to expand to contain this element and, by extension, any non 'position:absolute' siblings that precede it in the mark-up */ 
visibility: hidden; 
}