필드 세트/범례와 함께 Divs/Layers 사용

Question

양식을 작성 중입니다. div의 절대 위치 지정을 사용하여 양식의 레이아웃을 결정했습니다. 지금 각 divs 그룹에 formset을 넣으려고합니다. 문제는 formset이 라인을 생성하지만 모든 div에 대해 스트레치가 일어나지 않는다는 것입니다. 절대적으로 배치 된 b/c를 추측합니다. 내 코드의 예는 다음과 같습니다.

<div> 
    <fieldset id="BasicInfo"> 
    <legend>Basic Info.</legend> 
    <div id="first_name" style="position: absolute; width: 118px; height: 17px; z-index: 2; left: 13px; top: 82px"> 
     First Name:</div> 
    <div id="first_name_edit" style="position: absolute; width: 172px; height: 17px; z-index: 3; left: 136px; top: 82px"> 
    </div> 
    <div id="last_name" style="position: absolute; width: 118px; height: 17px; z-index: 2; left: 313px; top: 82px"> 
     Last Name:</div> 
    <div id="last_name_edit" style="position: absolute; width: 172px; height: 17px; z-index: 3; left: 435px; top: 82px"> 
    </div> 
    <div id="gender" style="position: absolute; width: 118px; height: 17px; z-index: 2; left: 613px; top: 82px"> 
     Gender:</div> 
    <div id="gender_edit" style="position: absolute; width: 172px; height: 17px; z-index: 3; left: 738px; top: 82px"> 
    </div> 
    <div id="dob" style="position: absolute; width: 118px; height: 17px; z-index: 2; left: 14px; top: 120px"> 
     Date of Birth: 
    </div> 
    <div id="dob_edit" style="position: absolute; width: 172px; height: 17px; z-index: 3; left: 136px; top: 120px"> 
    </div> 
    <div id="age" style="position: absolute; width: 118px; height: 17px; z-index: 2; left: 313px; top: 120px"> 
     Age:</div> 
    <div id="age_edit" style="position: absolute; width: 172px; height: 17px; z-index: 3; left: 435px; top: 120px"> 
    </div> 
    <div id="intended_major" style="position: absolute; width: 118px; height: 17px; z-index: 2; left: 613px; top: 120px"> 
     Intended Major:</div> 
    <div id="intended_major_edit" style="position: absolute; width: 172px; height: 17px; z-index: 3; left: 738px; top: 120px"> 
    </div> 
    <div id="email" style="position: absolute; width: 118px; height: 17px; z-index: 2; left: 13px; top: 162px"> 
     Email:</div> 
    <div id="email_edit" style="position: absolute; width: 172px; height: 17px; z-index: 3; left: 136px; top: 162px"> 
    </div> 
    <div id="phone" style="position: absolute; width: 118px; height: 17px; z-index: 2; left: 313px; top: 162px; right: 561px;"> 
     Phone:</div> 
    <div id="phone_edit" style="position: absolute; width: 172px; height: 17px; z-index: 3; left: 435px; top: 162px"> 
    </fieldset> 
    </div> 

Answer 1

올바른 것으로 추측됩니다. 절대 위치 지정은 요소를 정상적인 흐름에서 벗어나서 position:relative 집합을 가진 컨테이너 부모 인 top:0;left:0 상대 위치에 배치합니다. 위치가없는 경우 : 상대를 본문에 상대적으로 설정합니다. 상위 div의 높이를 정의하지 않으면 0 (또는 1px 또는 기본 글꼴 크기 높이 - 사용자가 볼 브라우저에 따라 다름)이됩니다. 나는 절대적 위치 선정의 필요성을 보지 못했다.

는 다음과 같이하십시오 :

/* css */ 
.label {float:left;width:auto;} 
.input {float:left;width:auto;} 
.clear {clear:both;height:1px;font-size:1px;line-height:1px;} /* 1px line clear */ 

/* html */ 

<form> 
<fieldset> 
<div class="field"> 
<div class="label"><label>Username:</label></div> 
<div class="input"><input type="text" /></div> 
<div class="clear"></div> 
</div> 
</fieldset> 
</form> 

필요할 경우 easly, 검증, 힌트 및 기타 추가 요소를 포함 할 수 있기 때문에 나는 종종 복잡한 형태를 구성하는 레이아웃의이 종류를 사용합니다. 또한 디자인을 변경해야만 인라인 CSS를 작성하면 정말 불쾌해질 수 있습니다. 클래스를 대신 사용하십시오.