긴 텍스트로 인해 인라인 요소가 아래에 표시됩니다.

Question

인라인 블록 요소가 있습니다. 두 요소를 나란히 표시하고 싶습니다. 긴 텍스트 (줄 바꿈)로 인해 두 번째 블록 요소의 링크 텍스트가 두 줄에 표시되면 링크 부모 요소가 두 번째 줄에 표시됩니다.

두 번째 div.job_content 블록이 첫 번째 것과 같이 표시되어야합니다 (나란히).

아이디어가 있으십니까?

http://jsfiddle.net/DxTg2/6/ 너희들 감사 : 여기

는 바이올린입니다.

편집 : 여기

훨씬 간단한 예입니다 http://jsfiddle.net/DxTg2/11/

단순히 텍스트를 볼 수있는 결과 프레임의 크기를 조정 아래로 밀려 ... 나는이 나는 전에이하지 않는 짓을

Answer 1

편집 ... 잘못된 것을 얻을

체크 아웃 this jsfiddle

.content { 
    width: 700px; 
} 
.job-content { 
    display:inline-block; 
    border: 1px solid red; 
    margin: 20px 0;  
} 
.job-thumbnail { 
    display: inline-block; 
} 

.job-thumbnail img { 
    margin: 10px 10px 5px; 
    max-width: none; 
    border: none; 
} 
.job-title { 
    display: inline-block; 
    vertical-align: top; 
    width:190px; 
} 

Answer 2

인라인 블록을 사용하는 이유는 무엇입니까?

당신은 할 일이 많이 쉬워 요소 떠 경우 - 인라인 블록을 제거 http://jsbin.com/ojoloq/1/edit

UPDATE에게

을하고 트릭을 할 것입니다 수레를 사용 (http://jsfiddle.net/DxTg2를/12 /)

.wrapper { 
    border: 1px solid red; 
float:left;    
} 
.thumbnail { 
    float:left; 
    margin-right: -80px; 
    width: 80px;   
} 

.text { 
    float:left; 
vertical-align: top; 
    width: auto; 
    padding-left: 80px; 
}