표처럼 보이는이 CSS 레이아웃을 개선하는 방법

Question

초보자는 웹용 CSS 레이아웃으로 작업하고 제 목적에 맞는 다음 코드를 구현했습니다.

실제로 작동하고 있다는 사실은 필연적으로 잘 작성된 것은 아닙니다.

좋은 구조화 된 코드와 간단한가요?

가능한 경우이 코드를 향상시키는 방법을 말씀해 주시겠습니까?

미리 감사드립니다.

Click here for the current implementation.

몇 줄의 HTML 코드 (see this link for all code). CSS 코드의

<div class='container'> 

    <div class='listItem'> 

     <!-- Column 1 --> 
     <div class='col1'> </div> 

     <!-- Column 2 --> 
     <div class="col2"> 
      <div class="col2up"> 
       <div class="author">Author</div> 
       <div class="date">Date</div> 
      </div> 
      <div class="col2down"> 
       <div class="message">message........</div> 
      </div> 
     </div> 

     <!-- Column 3 --> 
     <div class="col3"> 
      <span>Like</span> 
      <span>Replay</span> 
     </div> 

     <!-- Footer --> 
     <div class="linedot">&nbsp;</div> 

    </div> 

</div>  

몇 줄 (see this link for all code) : 나는 CSS와 HTML에 개선을 추가 한

.container { 
    width: 500px; 
    height: auto; 
    border: 1px dotted #f0f; 
} 
.listItem { 
    margin: 0 auto; 
    margin-top: 8px; 
    height: 90px; 
} 
.listItem div.col1 { 
    float: left; 
    width: 15%; 
    border: 1px dotted #000; 
    height: 100%; 
} 
.listItem div.col2 { 
    float: left; 
    width: 49%; 
    height: 100%; 
} 
.............. 

Answer 1

, http://jsfiddle.net/FJhQ7/17/
이 또한 내가 제안 어디 라인에 추가 된 의견을 읽고 참조 변화.

일부 노트 :

1. 스타일링 목적으로   사용하지 마십시오.  을 <div class="linedot">&nbsp;</div>에서 삭제했으며 .linedot CSS 선언에 height: 1.2em;을 추가했습니다.
2. 올바르게 계승 된 스타일 속성을 다시 정의하지 마십시오. 여기에는 자체 선언이 포함되지만 브라우저에서 상속 된 정의 (예 : text-decoration: none;
3. )는 프로덕션 소스의 어떤 것과도 일치하지 않는 선택기를 포함하지 마십시오. 쓸모없는 코드 = 네트워크 용량을 불필요하게 사용합니다.
당신은 다른 차원을 구현 할 수 있기 때문에 나는이 제안에게 자신을 구현하지 않은
4. : 상대 단위를 사용하지 마십시오 (%)를 할 때 절대 사용할 수 있습니다 (px), 상대 단위는 컴퓨팅, 따라서 전력 (느린 더 많은 공간을 필요로하기 때문에 표현). (하위) 컨테이너에 대해 고정 높이 (90px)와 너비 (500px)를 정의했지만 하위 요소에 대해 상대 단위를 사용하고 있습니다 (height:..%). 당신은 쉽게이 유닛들을 직접 변환 할 수 있습니다.
   유의 사항 :가 파산하지 않을 경우 오프셋 높이/폭 = 마진 + 국경 + 패딩 +