長文本會導致內聯元素在下面顯示

我必須內聯塊元素。我想並排顯示這兩個元素。當第二個塊元素中的鏈接文本由於長文本（自動換行）而顯示在兩行上時，鏈接父元素將顯示在第二行上。長文本會導致內聯元素在下面顯示

在小提琴波紋管第二個div.job_content塊應該顯示像第一個（並排）。

任何想法？

這裏是小提琴：http://jsfiddle.net/DxTg2/6/

謝謝你們。

編輯：

這是一個非常簡單的例子：http://jsfiddle.net/DxTg2/11/

簡單的調整結果框架看文字被向下推...我已經這樣做過這個，我不得到的是錯誤的...

來源

2012-08-08 Laurent

你想要什麼 – 2012-08-08 04:23:43

你的問題不是很清楚。 – 2012-08-08 04:28:56

我編輯了這個問題。對不起，我在這個問題上的英文不好...... – Laurent 2012-08-08 05:19:33

編輯

退房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; 
}

來源

2012-08-08 04:26:44

我編輯了這個問題。對不起，我的英語不好...... – Laurent 2012-08-08 05:19:51

我已經編輯了我的答案和jsfiddle鏈接，所以我希望這是你所需要的 – 2012-08-08 05:31:41

除了兩個.job-內容應該是一個在另一個之下並且是。作業內容寬度應該能夠變化（響應式設計）。所以修復.job標題寬度確實可以完成這項工作...... – Laurent 2012-08-08 05:43:22

是否有任何理由爲什麼你要使用內聯塊運行？

如果浮動這是很容易做到的元素 - 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; 
}

來源

2012-08-08 23:30:11 justinavery

圖像具有固定的寬度。所以百分比和浮點數方法並沒有做到這一點...... – Laurent 2012-08-09 06:11:59

長文本會導致內聯元素在下面顯示

回答

相關問題