다른 스타일의 텍스트를 CSS의 동일한 너비로 만들기

Question

동일한 텍스트로 된 html 요소를 만드는 방법이 있었는지 궁금 해서요. 그러나 다른 스타일에서는 고정 너비를주지 않고 동일한 양의 공간을 차지합니다.

Here's 내가 말하는 것에 대해

약간 다른 스타일을 가졌음에도 불구하고 두 div가 같은 너비를 갖기를 바랍니다. 텍스트를 변경할 수 있으므로 div를 고정 폭으로 지정하거나 고정 패딩 또는 여백을 사용하여이 작업을 수행 할 수 없습니다. 어떤 아이디어?

HTML :

<div class="normal">Lorem ipsum dolor sit amet.</div><br /> 
<div class="disabled">Lorem ipsum dolor sit amet.</div> 

CSS :

div { 
    padding:5px; 
    display:inline-block; 
    border:1px solid black; 
    background-color:lightgray; 
} 

.normal { 
    font-weight:bolder; 
} 

.disabled { 
    font-weight:lighter; 
    font-style:italic; 
    color:#666666; 
} 

편집 : 두 개의 서로 다른 스타일 div의는 응용 프로그램에서 서로 옆에되지 않습니다. 그들은 같은 div입니다, 나는 단지 다른 스타일이 적용될 때 div의 크기가 변경되지 않기를 원합니다. 여기에 더 좋은 예는 다음과 같습니다 http://jsfiddle.net/cbargren/4b8KQ/3/

Answer 1

은 display: inline-block와 div에서 그들을 감싸고, 그리고 아이 div의에서 display: inline-block를 제거합니다.

http://jsfiddle.net/thirtydot/4b8KQ/1/

HTML :

<div class="foo"> 
    <div class="normal">Lorem ipsum dolor sit amet.</div> 
    <div class="disabled">Lorem ipsum dolor sit amet.</div> 
</div> 

CSS :

.foo { 
    display: inline-block; 
} 
.foo div { 
    padding:5px; 
    border:1px solid black; 
    background-color:lightgray; 
} 

.normal { 
    font-weight:bolder; 
} 

.disabled { 
    font-weight:lighter; 
    font-style:italic; 
    color:#666666; 
}