我簡單地使用內聯塊設計一個HTML頁面以使其響應。我將所有塊形式的圖像和文本設置爲內聯塊，但文本塊被移動到圖像塊下，我如何設置CSS並將文本塊放在圖像塊旁邊？使用內聯塊的自適應設計

演示：http://jsfiddle.net/yckelvin/ar1f3uz5/

HTML代碼

<div class="item-row"> 
<div class="item-li"><img src="https://3.bp.blogspot.com/-t9e7S8huhaQ/VBMVN6CbNGI/AAAAAAAAA14/02am46_jiJM/s1600/Big_smile.png" width="150" height="150" /></div> 
<div class="item-desc" ><h1>Item 1</h1> 
Description Description Description Description Description Description Description Description Description Description </div> 
</div> 

<div class="item-row item-indent-row"> 
<div class="item-li"><img src="https://3.bp.blogspot.com/-t9e7S8huhaQ/VBMVN6CbNGI/AAAAAAAAA14/02am46_jiJM/s1600/Big_smile.png" width="150" height="150" /></div> 
<div class="item-desc"><h1>Item 2</h1> 
Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description </div> 
</div>

CSS代碼

.item-row { display: block; width: 100%; padding: 30px; background-color: rgba(0,0,0,0.1); } 
.item-indent-row { padding-left: 150px; } 
.item-li {display: inline-block; width:50px; background-color: rgba(255,255,0,0.1); } 
.item-desc {display: inline-block; background-color: rgba(0,0,255,0.1); padding-left: 0px;}

實際樣品

項目1

描述描述描述描述描述描述描述描述描述描述

項目2

說明說明說明描述描述描述描述描述描述描述描述描述描述描述描述描述描述

來源

2014-09-30 Kelvin

'float：left' ?? – timgavin 2014-09-30 04:00:51

我嘗試了浮動，但無法控制圖像塊旁邊的文本塊。 – Kelvin 2014-09-30 04:05:37

.item-desc { 
    display:block; 
    width:200px; 
    /*Or whatever width you wanted the description 
     to be. Just make sure it's not too wide to fit on the same line 
    */ 
    float:left; 
    background-color: rgba(0,0,255,0.1); 
    padding-left: 0px; 
}

來源

2014-09-30 04:46:07 ksealey

使用white-space: nowrap;代替.item-row和white-space: normal;代替.item-desc

來源

2014-09-30 06:26:49 Anon

使用內聯塊的自適應設計

項目1

項目2

回答

相關問題