CSS DIV 위치 지정 및 경계 문제

Question

CSS에 문제가 있습니다! :) 여기 하나처럼 보이게 상자를 스타일링하고 싶습니다. http://dribbble.com/shots/1151646-Home-AgenceMe/attachments/148910 (차트 + 3 상자 오른쪽).

는 지금은 시도 :

.wktcontent { 
    float: left; 
    width: 80%; 
} 
.wktinfo { 
    float: right; 
    width: 20%; 
} 
.wkttitle { 
    height:34px; 
    padding:5px; 
    border-bottom:1px solid #000000; 
    margin-bottom:20px; 
} 

.wktinfocontent { 
    font-weight:bold; 
    border-top:1px dashed #000000; 
} 

및 HTML에서 :

<div class="wktcontent"> 
    <center><h2>Title</h2></center> 
    <p><h3>Content</h3></p> 
</div> 
<div class="wktinfo"> 
    <div class="wktinfocontent"><p><h4>27/7/2013</h4></p></div> 
    <div class="wktinfocontent"><p><h4>27/7/2013</h4></p></div> 
    <div class="wktinfocontent"><p><h4>27/7/2013</h4></p></div> 
    <div class="wktinfocontent"><p><h4>27/7/2013</h4></p></div> 
</div> 

내가 모든 것을 잘 정렬 생각합니다. 그러나 곧 나는

border: 1px solid lightblue; 

제목이 오른쪽에있는 정보를 정기적 위에 배치됩니다를 정의하여 상자에 테두리를 추가.

질문의 두 번째 부분은 다음과 같습니다. 오른쪽에있는 숫자 (드리블의 예와 같이)와 옆의 텍스트를 어떻게 맞출 수 있습니까?

정말 고마워요 !!

Answer 1

테두리를 추가하면 요소 크기가 변경됩니다. 요소에 1 픽셀의 테두리를 추가 한 다음 너비와 높이에서 1 픽셀을 제거합니다. 이 작업을 수행하지 않으면 레이아웃과 관련된 문제가 발생합니다.

Answer 2

jsfiddle 및 chrome에서 오류를 재현하지 못했습니다. 어떤 브라우저를 사용하고 있습니까?

숫자에 대해서는 각 div에서 table을 사용하여 두 반쪽을 올바르게 정렬 할 것을 제안합니다. 다음 줄의 내용 :

<div class="wktinfocontent"> 
    <table> 
    <tr> 
     <td width="30%"> 
     07 
     </td> 
     <td width="70%"> 
     Hours play game today 
     </td> 
    </tr> 
    </table> 
</div>