div css 레이아웃 소감

2.1. 포석 소감
2.1.1. 총원칙
(1) CSS가 있는 각 행의 DIV 수평 레이아웃을 행별로 설계합니다.

 
   display: block;
   float: left;

(2) 행이 여러 개인 경우 CC는 다음과 같은 DIV Professional 줄바꿈:

clear: left;

(3) 열이 열과 간격이 있을 때는 DIV로 간격을 두십시오.이유:margin이나paddin을 사용하면 때때로 통제할 수 없는 상황이 발생할 수 있다.해당 CSS

margin-left:30px;

(4) 서로 다른 그룹 간에 하나의 DIV로 거리를 늘린다
(5) 여러 그룹이 있는데 각 그룹은 하나의 DIV를 사용하는데 그 CCS는 주로 경계와 배경, 크기를 제어한다.
2.1.2. 규칙성이 강한 방진 배치 설정
[img]http://dl.iteye.com/upload/attachment/462121/2e3956fb-2772-3673-8dc1-27eb55774414.jpg[/img]
열에 따라 같은 유형의 열을 css로 설계하기;각 그룹 앞에 간격 CSS가 하나씩 추가됩니다.서로 다른 간격으로 서로 다른 CSS를 증설하다.위 그림에 label,text가 추가되었습니다.
전체 CSS는 다음과 같습니다.

        .zedit {
		background-color: #E8E8D0;
		height: 300px;
	}
	br {
		clear: left;
	}

	#zedit .top {
		padding-top:40px;
		margin-left:30px;
		height:110px;

	}
	#zedit .top label {
		text-align: right;
		margin-right:10px;
		display: block;
		float: left;

	}
	#zedit .top input {
		display: block;
		float: left;
		margin-bottom:20px;
		width:150px;

	}
	#zedit .top .interval {
		display: block;
		float: left;
		width:20px;

	}

Html: